Bootstrap 4 中的中心人物图像和标题

Question

我有一个包含图像和标题的图形，如下所示：

<figure class="figure">
  <img src="../img/atmpressure.svg" class="figure-img img-fluid" alt="pressue plot">
  <figcaption class="figure-caption text-center">Plot of pressure at different altitudes.</figcaption>
</figure>

我正在使用 Bootstrap 4 来设置网页样式。使用 text-center class 作为标题，我可以将标题文本居中。我还想将图像居中放置在图中。当图像在图形中时，mx-auto 和 text-center classes 不起作用（参见下面的示例）。

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

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

  <!-- Styles -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <!-- MathJax used to display equations -->
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}, CommonHTML: {scale: 130} });
  </script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>

<body>

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

        <p>Elit ratione dolorum velit nesciunt aliquid Vitae culpa exercitationem ex animi quis praesentium Fuga sapiente dignissimos deserunt quia officiis nihil. Vero dignissimos excepturi iste ut fugiat! Nostrum quibusdam labore molestiae.</p>

        <figure class="figure text-center">
          <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" class="figure-img img-fluid mx-auto d-block" alt="pressue plot">
          <figcaption class="figure-caption text-center">Plot of pressure at different altitudes.</figcaption>
        </figure>

      </div>
    </div>
  </div>
</body>

</html>

如何使列中的整个图形水平居中？

Answer 1

问题有两个。您最初的问题是 figcaption 上只有 .text-center。要使 img 和 figcaption 在 figure 中居中，请将 .text-center 移动到 figure，这将使内联 img 和文本居中figcaption水平。

然后当您说这不起作用并包括页面其余部分的上下文时，结果表明您也希望 figure 相对于其周围的内容居中。 figure 有 class .figure，它添加了 display: inline-block;，因此默认情况下它将在 .col 中左对齐。使 figure 的内容相对于 figure 之外的内容居中的最简单方法是删除 .figure class，这样元素就可以是原生的 display: block 和 .text-center 将其内容居中，或者如果您想保留 .figure [=43]，可以将 class .d-block 添加到 figure =].

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Styles -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col">
        <p>Elit ratione dolorum velit nesciunt aliquid Vitae culpa exercitationem ex animi quis praesentium Fuga sapiente dignissimos deserunt quia officiis nihil. Vero dignissimos excepturi iste ut fugiat! Nostrum quibusdam labore molestiae.</p>
        <figure class="text-center">
          <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" class="figure-img img-fluid" alt="pressue plot">
          <figcaption class="figure-caption">Plot of pressure at different altitudes.</figcaption>
        </figure>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

您可以覆盖 "figure" class:

.figure {display: table;margin-right: auto;margin-left: auto;}

.figure-caption {display: table-caption;caption-side: bottom;text-align: center;}

Answer 3

在图标签中尝试 w-100 text-center class。

您的代码应如下所示：

<figure class="figure w-100 text-center">   <!-- add 'w-100 text-center' class here -->
  <img src="../img/atmpressure.svg" class="figure-img img-fluid" alt="pressue plot">
  <figcaption class="figure-caption text-center">Plot of pressure at different altitudes.</figcaption>
</figure>

Bootstrap 4 中的中心人物图像和标题

Center figure image and caption in Bootstrap 4

html

css

figure

bootstrap-4