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

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

588557 次浏览
小开
最佳答案

更新:虽然这个答案在2013年初可能是正确的，但它不应该再被使用了。正确的解决方案使用补偿，如下所示:

class="mx-auto"

至于其他用户的建议，也有本地引导类可用，如:

class="text-center"
class="pagination-centered"
小开

对于水平居中，你可以这样做:

.centering{
float:none;
margin:0 auto
}


<div class="span8 centering"></div>
小开

我用这个

<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}


.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}


.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}


.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
小开

从引导文件:

将一个元素设置为display: block并通过margin居中。可作为mixin和类使用。

<div class="center-block">...</div>
小开

我喜欢这是一个类似问题的解:

在实际的表数据<td>和表头<th>元素上使用bootstrap的text-center类。所以

<td class="text-center">Cell data</td>和<th class="text-center">Header cell data</th>

小开

如果你试图在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 (text-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类，图像将仅通过添加text-center类居中

此外，你应该知道flexbox的基础知识以及如何使用它，因为Bootstrap 4现在在本地使用它. c。

这是一个优秀的，快节奏的Brad Schiff的视频教程

这是一个很棒的备忘单

小开

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

.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class = "content" >
  

<p> some text </p>
</div>

小开

在引导4中，定心方法发生了变化。

水平中心在引导4

  • text-center仍然用于display:inline元素
  • mx-auto将center-block替换为display:flex子节点居中
  • offset-* 或 mx-auto可用于网格列居中

mx-auto(自动x轴边距)将位于具有定义宽度， (%， vw， px等)的display:block或display:flex元素的中心。在网格列上默认使用Flexbox，因此也有各种flexbox定心方法。

Demo Bootstrap 4水平定心

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

小开

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>

来源:引导4.1

小开

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

中心水平确实是text-center类

然而，中心垂直使用引导类同时添加了mb-auto mt-auto，这样margin-top和margin- bottom就被设置为auto。

小开

bootstrap4垂直中心的几个项目

d-flex用于伸缩规则

flex-column用于项目的垂直方向

align-items-center用于水平定心

justify-content-center用于垂直定心

风格=“高度:300 px;”必须为设定点，其中center为calc或使用h - 100类

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center justify-content-center bg-secondary" style="
height: 300px;
">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
</div>

小开

Bootstrap 4使用flex属性解决了这个问题。你可以使用这些类:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>

这些类将使您的内容水平和垂直居中。


提交答案