Question

我有多个这样的div

<div class='unit'>number1</div>
<div class='unit'>number2</div>
<div class='unit'>number3</div>

CSS

.unit{
  border: solid 2px yellow;
  float: left;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
}

我想垂直对齐每个单元的内容，所以我使用了上面的css。但是，我只能将文本水平居中而不是垂直。任何人都可以帮我解决这个问题吗？

Answer 1

使用它

.unit{
  border: solid 2px yellow;
  display:table-cell;
  height: 50px;
  width: 50px;
  text-align: center;   
  vertical-align: middle;
}

在此工作 - http://jsfiddle.net/kfE4Z/

Answer 2

display:table-cell;
vertical-align:middle;

您可以在外部框中创建内容div，如果您不介意使用表格单元，则可以使用它

JSFIDDLE DEMO

如何垂直对齐文本

2 个答案: