在div中垂直对齐文本

小开

最佳答案

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

小开

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

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

看看你的更新的示例。

===更新===

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

超文本标记语言：

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

css：

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

另见下一个例子。

小开

这只是应该工作：

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

我在你的demo上试过了。

小开

Andres Ilich说得对以防有人错过他的评论…

A.）如果您只有一行文本：

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

<div>vertically centered text</div>

B.) If you have multiple lines of text:

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>

小开

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

我更新了JSfiddle显示CSS多行文本垂直对齐，如下所述这里：

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

小开

如果您需要多行，这是最简单的方法。将您的span文本包装在另一个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 */}

演示

当然，外部span可能是div或你有什么。

小开

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

表格单元格可以将多行文本垂直居中对齐，甚至默认情况下也可以这样做。因此，效果相当好的解决方案可能是这样的：

超文本标记语言：

<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

小开

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

A good guide to flexbox can be read on CSS Tricks. Thanks Ben (from comments) for pointing it out. I didn't have time to update.

A good guy named Mahendra posted a very working solution here.

The following class should make the element horizontally and vertically centered to its parent.

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

小开

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

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

当您想将框在屏幕上或其直接祖先中居中时，Omar代码（否则可操作）的问题就会出现。这种居中可以通过将其位置设置为

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

然后边缘：自动；或右边缘：自动；左边缘：自动；

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

小开

试试这个：

超文本标记语言

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

css

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