垂直对齐div中的文本

下面的代码(也可以作为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;        
}

当前回答

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

我更新了jsp，以显示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 />在“yet another…”

2013-07-17 13:30:23

其他回答

2016年4月10日更新

Flexboxes现在应该用来垂直(甚至水平)对齐物品。

身体{ 身高:150 px; 边框:5px纯青色; 字体大小:50 px; 显示:flex; 对齐项目:中心;/*垂直中心对齐*/ justify-content:中心;/*水平中心对齐*/ ｝中间

一个很好的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;
}

2013-11-02 09:31:51

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

#列内容{ 显示:inline-block; ｝ img { vertical-align:中间; ｝跨度{ 显示:inline-block; vertical-align:中间; ｝ /*为视觉目的*/ #列内容{ 边框:1px纯红色; 位置:相对; ｝ < div id = "列内容" > < img src = " http://i.imgur.com/WxW4B.png " > < span > <强> 1234 < / >强另一个文本内容应该垂直居中</span> < / div >

JSFiddle

2012-02-12 14:06:45

试试这个:

HTML

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

CSS

div {
    height: 100px;
}

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

2014-04-03 21:14:48

安德烈斯·伊里奇说得对。以防有人错过他的评论…

a .)如果你只有一行文本:

div ｛身高:200 px; 行高:200 px;/* <——这是必须定义*/的内容 } <div>垂直居中文本</div>

b .)如果你有多行文本:

div ｛身高:200 px; 行高:200 px; ｝跨度｛显示:inline-block; vertical-align:中间; 行高:18 px;/* <——调整*/ ｝ <div><span>垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本

2013-02-13 09:36:33

添加一个垂直对齐的CSS内容#column-content strong:

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

请参见更新后的示例。

=== update ===

在另一个文本周围加上一个span和另一个垂直对齐:

HTML:

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

CSS:

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

请参见下一个示例。

2012-02-12 14:12:55

垂直对齐div中的文本

推荐文章

最新文章

标签