Bootstrap 4 row does not align to middle

This question already has an answer here:

Center a column using Twitter Bootstrap 3 28 answers

---

发现了一个可行的CSS技巧

.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;
}

---

Bootstrap 4, like Bootstrap 3, uses offset to move or center entire columns. So in your case use offset-*-4 to move it over 4 cols in the 12 col grid.

<div class="row">
        <div class="col-lg-12 text-xs-center">
            <h1 class="content-header">Header</h1>
            <div class="row">
                <div class="col-md-2 col-lg-2 offset-md-4 offset-lg-4">
                    content
                </div>
                <div class="col-md-2 col-lg-2">
                    content
                </div>
            </div>
        </div>
    </div>

To center inline elements (like text), use: text-center (this was text-center in 3.x)

To center block elements (like DIV) or columns, use: mx-auto (this was center-block in 3.x)

Demo: http://www.codeply.com/go/Wxzbd3a6og

There are also new responsive alignment classes in Bootstrap 4 so you can align differently at various breakpoints.

链接地址: http://www.djcxy.com/p/75892.html

上一篇: 在一行BOOTSTRAP中居中排列

下一篇: Bootstrap 4行不与中间对齐