使用Twitter Bootstrap 3将列居中

我如何在Twitter Bootstrap 3的容器(12列)中心一个列大小的div ?

.centered { 背景颜色:红色; ｝ <！——最新编译和最小化的CSS——> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="匿名"> <身体类= "容器" > <div class=" font - family -宋体"> <img data-src="holder.js/100x100" alt="" /> . < / div > 身体< / >

我想要一个div，类。居中在容器中。如果有多个div，我可能会使用一行，但现在我只想要一个div的大小为一列居中容器(12列)。

我也不确定上面的方法是否足够好，因为目的不是将div抵消一半。我不需要在div之外的自由空间和div的内容按比例缩小。我想清空div之外的空间，以均匀分布(收缩直到容器宽度等于一列)。

当前回答

只需将显示内容的列设置为col-xs-12 (mobile-first;-)，并仅配置容器来控制您希望居中内容的宽度，因此:

.container { 背景颜色:蓝色; ｝ .centered { 背景颜色:红色; ｝ <body class="container col-xs-offset-3 col-xs-6"> <div class=" font - family -宋体"> <img data-src="holder.js/100x100" alt="" /> . < / div > 身体< / >

有关演示，请参见http://codepen.io/Kebten/pen/gpRNMe:-)

2015-06-13 13:14:27

其他回答

这不是我的代码，但它工作得很好(在Bootstrap 3上进行了测试)，而且我不必在冷偏移方面搞得一团糟。

演示:

/* centered columns styles */ .col-centered { display: inline-block; float: none; /* inline-block space fix */ margin-right: -4px; background-color: #ccc; border: 1px solid #ddd; } <div class="container"> <div class="row text-center"> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> </div> </div>

2018-04-19 09:22:07

这个作品。这可能是一种粗鄙的方式，但效果很好。它被测试为响应性(Y)。

.centered {
    background-color: teal;
    text-align: center;
}

2013-08-09 21:47:05

如果你把它放在你的行上，里面的所有列都将居中:

.row-centered {
    display: flex;
    justify-content: space-between;
}

2016-08-16 19:59:53

试试这个

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

你也可以使用其他col，比如col-md-2等等。

2017-03-08 06:46:06

<div class="container">
    <div class="row row-centered">
        <div class="col-xs-6 col-centered">Column 6</div>
        <div class="col-xs-6 col-centered">Column 6</div>
        <div class="col-xs-3 col-centered">Column 3</div>
        <div class="col-xs-3 col-centered">Column 3</div>
        <div class="col-xs-3 col-centered">Column 3</div>
    </div>
</div>

CSS

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
    text-align: center;
    background-color: #ccc;
    border: 1px solid #ddd;
}

2020-09-24 08:20:18

使用Twitter Bootstrap 3将列居中

推荐文章

最新文章

标签