Vertically center text in an absolutely centered sphere

This question already has an answer here:

How do I vertically center text with CSS? 34 answers

---

Flexbox to the rescue: http://jsfiddle.net/eevw3oes/2/

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

This can also be accomplished by adding more DOM and using traditional css. I see you're trying to use vertical-align: middle , but that doesn't work on block elements (only with inline-block and table-cell).

---

Flexbox would work, and so will transforms:

<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>

I've added inner <div> elements for the text. The 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.

---

I think you could add line-height with the same value as width

line-height: 100px;

See this Fiddle

Someone had already a similar problem on Stackoverflow.

链接地址: http://www.djcxy.com/p/41666.html

上一篇: CSS文本垂直居中对齐不居中

下一篇: 在绝对中心的球体中垂直居中文本