Подпись к рисунку выровнена по краю изображения

В Bootstrap 4.1 можно выровнять заголовок с полем изображения, как показано на рисунке ниже.

Выравнивание подписи к рисунку с изображением

Следуя примеру на странице getbootstrap.com, между заголовком и поля изображения, которое зависит от размера окна просмотра. Я хотел бы, чтобы подпись к рисунку была выровнена по левому краю изображения, а не по разделу рисунка.

Код, который я использую, указан ниже.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <figure>
          <img class="figure-img img-fluid rounded mx-auto d-block" src="https://source.unsplash.com/random/400x400" alt="An unsplash image" />
          <figcaption class="figure-caption">
            <strong>Picture 1</strong> A random image from unsplash.com
          </figcaption>
        </figure>
      </div><!-- End col-md-6 -->

      <div class="col-md-6">
        <h5>Lorem Ipsum</h5>
        <div class="text-justify">
          <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </p>
          <p>
            Nunc facilisis eu est a facilisis. Nullam lobortis porta elit, ut iaculis sapien bibendum et. Donec non accumsan turpis. Aliquam feugiat urna arcu, vel imperdiet metus egestas vitae. Vivamus eget tincidunt elit, aliquet condimentum mi. Aenean libero velit, ultricies ac nisi in, lobortis efficitur ligula. Vivamus quis tellus quis leo accumsan posuere. Sed sit amet dictum dolor. Duis ac volutpat ipsum, vitae porttitor felis. Proin egestas hendrerit elementum. Aenean finibus bibendum tellus, vel dictum justo consequat nec. Donec imperdiet sollicitudin risus sed suscipit. Donec ullamcorper, ante eget ultrices condimentum, urna arcu hendrerit metus, sed scelerisque ex orci et mauris. Nunc ut quam et tellus malesuada convallis. Aliquam sed lectus a dui tempor rutrum.
          </p>
        </div>
      </div><!-- End col-md-6 -->

    </div> <!-- End row -->
  </div> <!-- End container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

css twitter-bootstrap bootstrap-4 figure caption
person John    schedule 10.06.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward 

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

https://getbootstrap.com/docs/4.1/content/figures/

По умолчанию загрузочные figure и figurecaption выравниваются по левому краю. Именно потому, что вы используете d-block и mx-auto, они теперь не выровнены. mx-auto выравнивает img по центру. Я думаю, что лучший способ - удалить эти два класса.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>

  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <figure>
          <img class="figure-img img-fluid rounded" src="https://source.unsplash.com/random/400x400" alt="An unsplash image" />
          <figcaption class="figure-caption">
            <strong>Picture 1</strong> A random image from unsplash.com
          </figcaption>
        </figure>
      </div>
      <!-- End col-md-6 -->

      <div class="col-md-6">
        <h5>Lorem Ipsum</h5>
        <div class="text-justify">
          <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </p>
          <p>
            Nunc facilisis eu est a facilisis. Nullam lobortis porta elit, ut iaculis sapien bibendum et. Donec non accumsan turpis. Aliquam feugiat urna arcu, vel imperdiet metus egestas vitae. Vivamus eget tincidunt elit, aliquet condimentum mi. Aenean libero velit,
            ultricies ac nisi in, lobortis efficitur ligula. Vivamus quis tellus quis leo accumsan posuere. Sed sit amet dictum dolor. Duis ac volutpat ipsum, vitae porttitor felis. Proin egestas hendrerit elementum. Aenean finibus bibendum tellus, vel
            dictum justo consequat nec. Donec imperdiet sollicitudin risus sed suscipit. Donec ullamcorper, ante eget ultrices condimentum, urna arcu hendrerit metus, sed scelerisque ex orci et mauris. Nunc ut quam et tellus malesuada convallis. Aliquam
            sed lectus a dui tempor rutrum.
          </p>
        </div>
      </div>
      <!-- End col-md-6 -->

    </div>
    <!-- End row -->
  </div>
  <!-- End container -->

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>

</html>

person mahan    schedule 10.06.2018
comment
Спасибо, это решение, безусловно, выровняло изображение с подписью к рисунку, о чем я и просил. Хотя выравнивание по центру изображения в фигурном div теряется! - person John; 11.06.2018

arrow_upward
0
arrow_downward

Ваше изображение получает margin-left: auto !important от фреймворка Bootstrap

Поэтому, чтобы предотвратить это, вы можете перезаписать его, установив одинаковое поле для изображения и подписи, например:

img.figure-img, figcaption.figure-caption  {
     margin-left: 0px !important;
}

А затем, возможно, добавьте несколько медиа-запросов.

Я сделал пример здесь - jsfiddle

/* --- Give both image and caption same margin --- */

img.figure-img, figcaption.figure-caption  {
  margin-left: 0px !important;
}

/* --- Or just remove the auto width -- */
/* img.figure-img {
  margin-left: unset !important;
} */
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <figure>
          <img class="figure-img img-fluid rounded mx-auto d-block" src="https://source.unsplash.com/random/400x400" alt="An unsplash image" />
          <figcaption class="figure-caption">
            <strong>Picture 1</strong> A random image from unsplash.com
          </figcaption>
        </figure>
      </div><!-- End col-md-6 -->

      <div class="col-md-6">
        <h5>Lorem Ipsum</h5>
        <div class="text-justify">
          <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </p>
          <p>
            Nunc facilisis eu est a facilisis. Nullam lobortis porta elit, ut iaculis sapien bibendum et. Donec non accumsan turpis. Aliquam feugiat urna arcu, vel imperdiet metus egestas vitae. Vivamus eget tincidunt elit, aliquet condimentum mi. Aenean libero velit, ultricies ac nisi in, lobortis efficitur ligula. Vivamus quis tellus quis leo accumsan posuere. Sed sit amet dictum dolor. Duis ac volutpat ipsum, vitae porttitor felis. Proin egestas hendrerit elementum. Aenean finibus bibendum tellus, vel dictum justo consequat nec. Donec imperdiet sollicitudin risus sed suscipit. Donec ullamcorper, ante eget ultrices condimentum, urna arcu hendrerit metus, sed scelerisque ex orci et mauris. Nunc ut quam et tellus malesuada convallis. Aliquam sed lectus a dui tempor rutrum.
          </p>
        </div>
      </div><!-- End col-md-6 -->

    </div> <!-- End row -->
  </div> <!-- End container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

person Marc Hjorth    schedule 10.06.2018
comment
Спасибо, это решение работает аналогично решению Махана выше. Выравнивание по центру изображения в div теряется, хотя я понимаю, что это можно решить с помощью медиа-запросов. Не уверен, почему за этот ответ проголосовали против. - person John; 11.06.2018
comment
Да, я тоже, рад, что вы нашли свой ответ :) - person Marc Hjorth; 11.06.2018
comment
@Марк, я нашел твой ответ полезным, поэтому проголосовал за него! - person Greg; 17.11.2019