Question

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

<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

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 2

为您的文字内容创建一个容器，可能是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 3

2016年4月10日更新

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

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

可以在CSS Tricks上阅读有关flexbox的精彩指南。感谢Ben（来自评论）指出，没有时间更新。

一位名叫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 4

这是一个老问题，但接受的答案不适用于多行文字。我按照to show css multiline text vertical align所解释的那样更新了JSfiddle here：

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

试试这个：

HTML

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

CSS

div {
    height: 100px;
}

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

Answer 6

这应该可行：

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

在你的演示中尝试过。

Answer 7

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

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

当您希望将框放在屏幕中或其直接祖先中时，Omar的代码出现问题，否则会出现问题。通过将其位置设置为

来完成此居中

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

然后 margin：auto; 或 margin-right：auto;保证金左：汽车;

在这个盒子中心调整环境下，奥马尔的建议不起作用。在IE8中不起作用（但市场份额为7.7％）。因此，对于IE8（和其他浏览器），应该考虑上述其他解决方案中的解决方法。

Answer 8

如果您需要多行，这是最简单的方法。将span'文字换成另一个span并用line-height指定其高度。多行的技巧是重置内部span的{{1}}。

line-height

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

DEMO

当然外部.textvalignmiddle { line-height: /*set height*/; } .textvalignmiddle > span { display: inline-block; vertical-align: middle; line-height: 1em; /*set line height back to normal*/ }可以是span或whathaveyou

Answer 9

也为css #column-content strong添加垂直对齐：

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

另见updated example。

=== UPDATE ===

围绕其他文本的跨度和另一个垂直对齐：

HTML：

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

css：

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

另见next example。

Answer 10

我知道这完全是愚蠢的，你通常不应该在不创建表时使用表格，但是：表格单元格可以对齐多行垂直居中的文本，甚至默认情况下这样做。因此，一个非常好的解决方案可能是这样的：

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

垂直对齐div中的文本

10 个答案: