Question

我尝试了几种技术，但到目前为止，没有任何方法可以将文本置于绝对居中的范围内。球体的大小是已知的，但不是文本的长度。这是一个缺乏垂直对齐的示例：

的CSS：

div
{
    position: absolute;
    border-radius: 50%;
    top: 50px;
    width: 100px;
    height: 100px;
    background: yellow;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
}

Answer 1

Flexbox救援：http://jsfiddle.net/eevw3oes/2/

div {
    align-items: center;
    display: flex;
    …
}

这也可以通过添加更多DOM并使用传统的css来实现。我看到你正在尝试使用vertical-align: middle，但这对块元素不起作用（仅使用内联块和表格单元格）。

Answer 2

Flexbox会起作用，因此会改变：

<div class=circle style="left: 50px;">
    <div class=text>
    I'd like to be centered.
    </div>
</div>

<div class=circle style="left: 200px;">
    <div class=text>
    I would like also like to be centerd. Even though I have long text. I would like to be centerd horizontally and vertically. Is that possible. Oh I wish it would work.
  </div>
</div>

我已为文字添加内部<div>元素。 CSS：

.circle {
    position: absolute;
    border-radius: 50%;
    top: 50px;
    width: 100px;
    height: 100px;
    background: yellow;
    overflow: hidden;
    padding: 20px;
}

div.text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    height: auto;
}

CodePen.

Answer 3

我认为您可以使用与line-height

相同的值添加width

line-height: 100px;

请参阅此Fiddle

有人在Stackoverflow上遇到了类似的问题。

在绝对居中的球体中垂直居中文本

3 个答案: