- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个包含图像和标题的图形,如下所示:
<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>
如何使列中的整个图形水平居中?
最佳答案
问题有两方面。您最初的问题是您在 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
将其内容居中,或者您可以将类 .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/
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: How to align a to the middle of the page 这是一个简单的问题,应该有一个简
我想知道如何在屏幕中央的ListView中生成2个itens。 class _CategoriesState extends State { List categories = ["Anterio
我需要修复 UICollectionView 的一个小问题,当在 6s 设备尺寸上时,我得到如下布局: 但是,我想知道将它们居中以使其成为两条线的最佳方法是什么,或者我应该将它们缩小一点以便可以放置其
我尝试在 UIImageView 中居中 CAShapeLayer 但没有成功,我找到了解决方案,将其(CAShapeLayer)添加到 UIVIew,然后将 UIVIew 添加到 ImageView
一直在从线性布局和相对布局切换,因为我想实现图像的居中。 显示图片:
* { margin:0; padding:0; } /** General Style Info **/ body { background: #003d4c; co
我目前正在尝试修改我在 Wordpress 上的 Royal Slider 插件 (http://dimsemenov.com/plugins/royal-slider/) 我的目标是将所有标题的文本
我已经坚持了一段时间,因此简化了我的要求。当您单击标记时,信息窗口将打开,当用户缩放时,我希望该标记位于 map 的中心。这不起作用,但我认为它很接近: function bindInfoWindow
/* Linked Styles */ body { padding: 0 !important;
这个问题在这里已经有了答案: How do I center floated elements? (12 个答案) 关闭 7 年前。
这个问题在这里已经有了答案: Is there an equivalent to background-size: cover and contain for image elements? (1
我试图让我的页眉停留在页面的中间,不管我在什么窗口大小。 我试过使用 Bootstrap。 StackOverflow 还有这个 CSS。 .section-t
我有一个 1600 像素宽的页面。主要区域虽然只有 900 像素宽。我有一个导航应该固定在页面的中心(它是)。我的问题是当我打开页面时,页面固定在左侧而不是在打开时居中。当用户访问该网站时,我需要做什
我正在尝试找到 View 的中心。对于非旋转 View ,该值是正确的,但对于旋转 View ,它不正确,因为中心 (0,0) 正在旋转。在缩放的情况下,即使缩放后宽度和高度也保持不变 我正在使用以下
预期效果是将 Kartennummer 和 Passwort 集中。 这怎么可能? 我为此使用了一个自定义类: import 'package:flutter/material.dart'; impo
我管理着许多 Maven 项目。他们中的大多数部署到我们的内部 maven 存储库。现在我想开始向 Maven Central 发布一个项目。到目前为止,我有一个父 POM,它指定了我们内部存储库的
我试图锚定两个进展,但我看不到获得预期结果的方法。 我希望左边的进度条固定在左边,右边的条固定在中心固定(如下图所示) (下图显示调整大小的表格) 我尝试将控件放在具有各种 anchor 的停靠面板上
我正在玩 Angular 模态 ui 对话框。我想知道有什么方法可以让它居中?我发现了一个类似的问题: Twitter Bootstrap - Center Modal Dialog 但无法使其工作,
是否可以将值标签放置在条形上,使它们位于条形的中心? 如果我设置条形 align: "center",则条形上的标签将关闭且不居中。 $(function() { var d
http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-signalr-20-s
我是一名优秀的程序员,十分优秀!