Twitter Bootstrap-如何将元素水平或垂直居中


Answers:


246

更新:虽然这个答案早在2013年初就可能是正确的,但现在不应该再使用。正确的解决方案使用offsets


至于其他用户的建议,也可以使用本机引导程序类,例如:

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

感谢@Henning和@trejder


22
完全相同的样式已包含在Bootstrap中;只需使用class="text-center"
Henning

3
.pagination-centered作为替代。
trejder

7
这应该是答案,其他人则忽略了问题的整个“自举”部分。
瑞安·麦克唐纳

1
@RyanMcDonough是的,这实际上消除了所有其他建议的人,所以我检查了答案是否可以?
itsme 2013年

1
使用text-center布局是非常不好的做法。在Bootstrap中对齐列的正确方法是使用col-XX-offset-Y类。getbootstrap.com/css/#grid-offsetting。这个答案可能在2013年是正确的,但今天不再使用。
Niels Keurentjes '16


55

对于此问题的未来访问者:

如果您尝试在div中将图像居中,但图像无法居中,则可以描述您的问题:

jsFiddle DEMO的问题

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

img-responsive类添加display:block到图像标签,其停止指令text-align:centertext-center从工作类)。

解:

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

jsFiddle of the solution

添加center-block该类将覆盖display:block使用img-responsive该类所放置的指令。

如果没有img-responsive课程,则只需添加text-center课程即可将图片居中


更新:

另外,您还应该了解flexbox的基础知识以及如何使用它,因为Bootstrap4现在本地使用了它

这是Brad Schiff精彩的快节奏视频教程

这是一个很棒的备忘单


32

更新于2018

引导4中,定心方法已经改变..

BS4中的水平中心

  • text-center仍用于display:inline元素
  • mx-auto取代center-block中心display:flex儿童
  • offset-* mx-auto可用于居中网格列

mx-auto(自动x轴边距)将围绕display:blockdisplay:flex具有一元件限定的宽度,( ,,% 等。)。默认情况下,在网格列上使用Flexbox,因此还有多种flexbox居中方法。vwpx

演示 Bootstrap 4水平居中

有关BS4中的垂直居中的信息,请参见 https://stackoverflow.com/a/41464397/171456


30

您可以像这样直接写入您的css文件:

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


9

我用这个

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

1
并在某些情况下不工作(见的评论基本上是相同的答案,不使用的引导特定类居中
达恩·达斯卡莱斯卡

7

对于水平居中,您可以具有以下内容:

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

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

4
当直接在图片中使用时,它不起作用(至少在当前实现中不起作用)<img src="img/logo.png" style="float:none; margin:0 auto" />。周围img有父母div和给予.text-center.pagination-centered类家长工程就像一个魅力。
trejder

2
要使用margin:0 auto将元素居中,您需要为该元素添加宽度。在上面的示例中,未指定宽度,因为span8在boobstrap中具有宽度,但是您的图像却不是这样<img src =“ img / logo.png” style =“ float:none; margin:0 auto; width:300px” />将图片在父级中水平居中
Raul

2
这将忽略问题的“引导程序”部分。
Dan Dascalescu 2014年


5

使用bootstrap 4,您可以使用flex

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

来源:bootstrap 4.1


3

bootstrap 4 + Flex解​​决此问题

您可以使用

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

它应该居中水平和垂直居中


0

我在Bootstrap 4中发现可以执行以下操作:

中心水平确实是text-center一流的

中心垂直,但是使用引导程序类添加了两者,mb-auto mt-auto因此margin-top和marginbottom被设置为auto。


0

用于bootstrap4垂直中心的一些项目

d-flex用于弹性规则

垂直方向在项目上的弹性柱

居中对齐内容中心

style ='height:300px;' 必须具有用于计算中心或使用h-100等级的设定点

<div class="d-flex flex-column 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> 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.