垂直对齐 div 中的文本 [重复]

Question

下面的代码（也可作为a demo on JS Fiddle 使用）不会将文本放置在中间，正如我所希望的那样。即使使用margin-top 属性，我也找不到任何方法将div 中的文本垂直居中。我该怎么做？

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>

#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}
    
#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}

Answer 1

2016 年 4 月 10 日更新

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

body {
    height: 150px;
    border: 5px solid cyan; 
    font-size: 50px;
    
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}

Middle

可以在CSS Tricks 上阅读关于 flexbox 的良好指南。感谢 Ben（来自 cmets）指出这一点。没时间更新。

---

一位名叫 Mahendra 的好人发布了一个非常有效的解决方案 here。

以下类应该使元素水平和垂直居中于其父级。

.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;
}

Answer 2

我知道这完全是愚蠢的，你通常真的不应该在不创建表时使用表，但是：

表格单元格可以将多行文本垂直居中对齐，默认情况下甚至可以这样做。所以一个很好的解决方案可能是这样的：

HTML：

<div class="box">
  <table class="textalignmiddle">
    <tr>
      <td>lorem ipsum ...</td>
    </tr>
  </table>
</div>

CSS（使表格项始终适合盒子 div）：

.box {
  /* For example */
  height: 300px;
}

.textalignmiddle {
  width: 100%;
  height: 100%;
}

请看这里： http://www.cssdesk.com/LzpeV

Answer 3

也为 CSS 内容 #column-content strong 添加垂直对齐：

#column-content strong {
    ...
    vertical-align: middle;
}

另请参阅您的updated example。

=== 更新 ===

在其他文本周围有一个跨度和另一个垂直对齐：

HTML：

... <span>yet another text content that should be centered vertically</span> ...

CSS：

#column-content span {
    vertical-align: middle;
}

另见next example。

Answer 4

如果您需要多行，这是最简单的方法。将 span'd 文本包裹在另一个 span 中，并使用 line-height 指定其高度。多行的诀窍是重置内部span 的line-height。

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /* Set height */;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /* Set line height back to normal */
}

DEMO

当然，外部的span 可以是div 或者你有什么。

Answer 5

这应该是可行的：

#column-content {
        --------
    margin-top: auto;
    margin-bottom: auto;
}

我在你的演示上试过了。

Answer 6

为了使 Omar（或 Mahendra）的解决方案更加通用，与 Firefox 相关的代码块应替换为以下内容：

/* Firefox */
display: flex;
justify-content: center;
align-items: center;

当您想将框置于屏幕或其直接祖先的中心时，会出现 Omar 代码的问题，否则会出现问题。这种居中是通过将其位置设置为

来完成的

position: relative; 或 position:static;（不带位置：绝对或固定）。

然后 margin: auto; 或 margin-right: auto;左边距：自动；

在此框居中对齐环境下，Omar 的建议不起作用。它在 Internet Explorer 8 中也不起作用（但市场份额为 7.7%）。因此，对于 Internet Explorer 8（和其他浏览器），应考虑采用上述其他解决方案中的解决方法。

Answer 7

接受的答案不适用于多行文本。

我按照here 的解释更新了 JSfiddle to show CSS multiline text vertical align：

<div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

它也适用于“又一个...”中的<br />

Answer 8

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

A.) 如果您只有一行文字：

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

<div>vertically centered text</div>

B.) 如果您有多行文本：

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

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

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

Answer 9

为您的文本内容创建一个容器，也许是 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>

JSFiddle

Answer 10

试试这个：

HTML

<div><span>Text</span></div>

CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}