gpt4 book ai didi

css - Bootstrap 4 中的中心图形图像和标题

转载 作者:太空狗 更新时间:2023-10-29 14:15:40 25 4
gpt4 key购买 nike

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

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

figure

我正在使用 Bootstrap 4 来设置网页样式。使用标题的 text-center 类,我能够将标题文本居中。我还想将图像居中放置在图中。当图像位于图形中时,mx-autotext-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>

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

最佳答案

问题有两方面。您最初的问题是您在 figcaption 上只有 .text-center。要使 imgfigcaptionfigure 中居中,将 .text-center 移动到 figure 而不是,这将使内联 imgfigcaption 中的文本水平居中。

然后当您说这不起作用并包括页面其余部分的上下文时,结果证明您也希望 figure 相对于它周围的内容居中。 figure 有类 .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>

关于css - Bootstrap 4 中的中心图形图像和标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44421192/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com