Bootstrap 4中的中心图形图像和标题
wig*_*ing 7 css html5 figure bootstrap-4
我有一个包含图像和标题的图形,如下所示:
<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>如何将整个图形水平居中在列中？
问题有两个。您最初的问题是您只.text-center在figcaption。居中img和figcaption中figure，移动.text-center至figure代替，并且将围绕内嵌img在和文字figcaption水平。
然后，当您说那行不通并且包括了页面其余部分的上下文时，您实际上也希望figure相对于其周围的内容居中。figure具有class .figure，它会添加，display: inline-block;因此.col默认情况下它将保持对齐。在内容中心最简单的方式figure相对于的内容外figure就是要么删除.figure类，这样的元素可以是它的天然display: block和.text-center将围绕它的内容，也可以添加类.d-block的figure，如果你想保留.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”类，则将“text-center d-block”添加到figure标签中是可行的。两种方法（请参阅我之前的评论）都可以正常工作。 (2认同)