将文本对齐到div

Question

我的浮点div只包含文字，我想在中间垂直对齐

HTML：

<div>CC</div>

我试试这个

div {
    height: 100px;
    border: 1px solid;
    float: left; /* this element is necessary for my big other code so i have to keep it */
    vertical-align: middle;
}

但它不起作用，我该如何解决？这是一个FIDDLE

Answer 1

您可以使用display:table-cell;来完成此操作。像这样：

HTML：

<div id="container">
    <div class="content">CC</div>
</div>

CSS：

#container {
    height:100px;
    width:100%;
    border:1px solid;
    display:table;
}
.content {
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

Updated Fiddle

Answer 2

使用display: table-cell和vertical-align: middle：）

div {
    height: 100px;
    border: 1px solid;
    vertical-align: middle;
    display:table-cell;
}

Fiddle

Answer 3

如果您只有一个单词或一小段文字，您只需使用以下CSS：

div {
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    float: left;
    border: 1px solid blue;
}

将line-height设置为与height相同，然后应用vertical-align: middle，如果只有一行文字，则效果很好。

请参阅演示：http://jsfiddle.net/audetwebdesign/2En98/

Answer 4

您可以使用text-align属性而不是vertical-align，然后使用“center”作为值;

简单如下：

  div {
       text-align: center;
  }