水平居中 <div> 那不是固定的

Question

我想在嘗試創建的響應網格中將列水平居中。 我已經設置好網格，並且工作正常。 但是我想制作一個.class，它將帶有一列並將其水平放置在父級（ .row ）中。 我將使用該類獲取一個單列行並將該列居中於所述行中。 我可以使用text-align屬性將text-align居中，但是如果我向該列添加邊框/背景，則我希望整個列都以居中的方式居中，而不僅僅是行內容。

這是codepen 。

Answer 1

假設您要在列上設置寬度，只需使用margin:0 auto使其居中即可。 您將需要用float:none覆蓋float:left 。

此處更新示例

.center {
    text-align: center;
    margin:0 auto;
    float:none;
}

另外，如果元素沒有設置固定的寬度，則可以簡單地使其成為行inline-block元素，然后將text-align:center添加到父元素。 動態寬度變化的完美選擇。