是否有可能在一个div内垂直对齐文本？

这个问题在这里已经有了答案：

如何垂直对齐div中的文本？ 25个答案

---

为您的文本内容创建一个容器，也许是一个span 。

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}

<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

---

Andres Ilich说得对。 以防万一有人错过了他的评论...

A.）如果你只有一行文字：

HTML：

<div>vertically centered text</div>

CSS：

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
  vertical-align: middle;
}

点击演示

B.）如果你有多行文字：

HTML：

<div><span>vertically centered text</span></div>

CSS：

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; /* <-- adjust this */
}

点击演示

---

2016年4月10日更新

现在应该使用Flexbox垂直（或甚至水平）对齐项目。

<div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

有关Flexbox的良好指南可以在CSS技巧上阅读。 感谢Ben（来自评论）指出，没有时间更新。

---

一个叫Mahendra的好人在这里发布了一个非常有效的解决方案

下面的类应该使元素水平和垂直居中其父。

.absolute-center {

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}

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

上一篇: Is it possible to vertically align text within a div?

下一篇: Is the recommendation to include CSS before JavaScript invalid?