在圆角div中垂直居中文本

Question

由于divs，我有两个border-radius是圆圈。它们是内联块，并且内部有多行文本：

http://jsfiddle.net/tmyie/hVNsZ/1/

但是，我需要在div中垂直居中这些文本行。这可能吗？

HTML：

<div class="circle">this is a sentence</div>

<div class="circle">this is<br>multiple<br>lines</div>

CSS：

.circle {
    width: 90px;
    height: 90px;
    border-radius: 90px;
    background-color: orange;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}

Answer 1

您必须将显示设置为“table-cell”并使用vertical-align：middle。 这是css：

.circle {
width: 90px;
height: 90px;
border-radius: 90px;
background-color: orange;
text-align: center;
display: table-cell;
overflow: hidden;
vertical-align:middle;
}

和小提琴：

http://jsfiddle.net/hVNsZ/6/

Answer 2

vertical-align属性仅适用于显示table-cell

的元素

.circle {
    width: 90px;
    height: 90px;
    border-radius: 90px;
    background-color: orange;
    text-align: center;
    display: table-cell;  //added
    overflow: hidden;
    vertical-align: middle; //aligned middle
}

JSFiddle