垂直对齐div中的文本

Question

下面的代码(也可以作为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日更新

现在,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>

可以在CSS技巧上阅读有关flexbox的精彩指南.感谢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;
}

Answer 4

这是一个老问题,但接受的答案不适用于多行文本.我更新了的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 />于"又一个......"

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;(不与位置:绝对或固定).

然后保证金:自动; 或者保证金权利:auto; 保证金左:自动;

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

Answer 8

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

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

另请参阅您更新的示例。

===更新===

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

HTML：

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

CSS：

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

另请参阅下一个示例。