我如何能中心水平或垂直与推特引导元素?

是否有任何方法在主父元素中垂直或水平地居中html元素?

当前回答

在Bootstrap 4中，定心方法已经改变。

水平中心在引导4

文本中心仍然用于显示:内联元素 Mx-auto将中心块替换为中心显示:flex子 Offset -*或mx-auto可用于网格列居中

Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%，vw, px等)。默认情况下，在网格列上使用Flexbox，因此也有各种Flexbox居中方法。

示范引导4水平定心

有关BS4的垂直定心，请参阅https://stackoverflow.com/a/41464397

其他回答

在Bootstrap 4中，定心方法已经改变。

水平中心在引导4

文本中心仍然用于显示:内联元素 Mx-auto将中心块替换为中心显示:flex子 Offset -*或mx-auto可用于网格列居中

Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%，vw, px等)。默认情况下，在网格列上使用Flexbox，因此也有各种Flexbox居中方法。

示范引导4水平定心

有关BS4的垂直定心，请参阅https://stackoverflow.com/a/41464397

在Bootstrap 4中，你可以使用基于flex的HTML类d-flex、justify-content-center和align-items-center:

来源:Bootstrap 4.1

如果你试图在div中居中一个图像，但图像不会居中，这可能描述了你的问题:

JSFiddle演示的问题

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsive类向图像标记添加了一个display:block指令，它将停止text-align:center(文本中心类)的工作。

解决方案:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

解决方案的JSFiddle演示

添加center-block类将覆盖使用img-responsive类放入的display:block指令。如果没有img-responsive类，图像将仅通过添加文本中心类居中

此外，您应该了解flexbox的基础知识以及如何使用它，因为Bootstrap 4现在本机使用它。

这是布拉德·希夫制作的一个优秀的、快节奏的视频教程

这里有一个很棒的小抄

我发现在Bootstrap 4中你可以这样做:

中心水平确实是文本中心类

中心垂直，但是使用bootstrap类添加mb-auto mt-auto，使margin-top和margin- bottom设置为auto。

你可以像这样直接写入你的CSS文件:

.content { 位置:绝对的; 上图:50%; 左:50%; 变换:翻译(-50%,-50%); ｝ <div class = "content" > <p>一些文本</p> < / div >

推荐文章