Bootstrap 4中的中心图形图像和标题答案

【问题标题】：Center figure image and caption in Bootstrap 4Bootstrap 4中的中心图形图像和标题
【发布时间】：2017-11-09 07:28:07
【问题描述】：

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

<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 类作为标题，我可以将标题文本居中。我还想在图中将图像居中。当图像在图中时，mx-auto 和 text-center 类不起作用（参见下面的示例）。

<!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>

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

【问题讨论】：

标签： css html bootstrap-4 figure

【解决方案1】：

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

然后，当您说这不起作用并包含页面其余部分的上下文时，事实证明您也希望 figure 相对于它周围的内容居中。 figure 具有类 .figure，它添加了 display: inline-block;，因此默认情况下它将在 .col 中左对齐。将figure 的内容相对于figure 之外的内容居中的最简单方法是删除.figure 类，以便元素可以是本机display: block 和.text-center 将其内容居中，或者如果您想保留.figure 类，可以将.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>

【讨论】：

我尝试了您的两个建议，但都不起作用。标题居中，但图像左对齐。
这是在您的个人网站/项目上吗？他们在我的回答中以你为中心吗？
问题出在引导程序上。如果我删除 figure 和 figure-caption 类并在 html 图形标签上使用 text-center，那么一切正常。
是的，如果保留figure 和figure-caption 类，则将text-center d-block 添加到图形标签中有效。任何一种方法（请参阅我之前的评论）都可以正常工作。
遇到了类似的问题，也使用 text-center 解决了这个问题。真的很奇怪，你不能做像figure text-center这样的事情！

【解决方案2】：

你可以覆盖“figure”类：

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

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

【讨论】：

【解决方案3】：

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

您的代码应如下所示：

<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>

【讨论】：