水平居中一个未固定的<div> <div>

Question

我想在我试图制作的响应式网格中水平居中一列。我有网格设置，它工作得很好。但是我想创建一个.class，它将采用一个列并将其水平居中放在父级（.row）中。我会使用这个类来获取一列的行并将列放在所述行的中心。我可以使用text-align属性将文本居中，但我希望整个列以这种方式居中，如果我向列中添加边框/背景，它将在行中居中，而不仅仅是列＆＃39;的内容。

这是codepen。

Answer 1

如果您要在列上设置宽度，只需使用margin:0 auto将其居中。您需要使用float:left覆盖float:none尽管..

UPDATED EXAMPLE HERE

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

或者，如果元素没有设置了固定的宽度，您只需将其设为inline-block元素并将text-align:center添加到父元素即可。适合动态变化的宽度。