我有一个包含文本的<div>元素,我想将这个<div>的内容垂直居中对齐。
这是我的<div>风格:
#盒子{高度:170px;宽度:270px;背景:#000;字体大小:48px;颜色:#FFF;文本对齐:居中;}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么?
我有一个包含文本的<div>元素,我想将这个<div>的内容垂直居中对齐。
这是我的<div>风格:
#盒子{高度:170px;宽度:270px;背景:#000;字体大小:48px;颜色:#FFF;文本对齐:居中;}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么?
当前回答
这非常有效。
您必须为div使用表样式,为内容使用居中对齐。
其他回答
对于单行文本(或单个字符),可以使用以下技术:
当#box具有非固定的相对高度(以%为单位)时,可以使用它。
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
在JsBin(更容易编辑CSS)或JsFiddle(更容易更改结果框的高度)观看现场演示。
如果你想将内部文本放在HTML中,而不是CSS中,那么你需要将文本内容包装在额外的内联元素中,然后编辑#box::after以匹配它。(当然,content:property应该被删除。)
例如<div id=“box”><span>文本内容</span></div>。在这种情况下,#box::after应替换为#box span。
对于Internet Explorer 8支持,必须将::替换为:。
灵活的方法
第二部分{宽度:250px;最小高度:50px;线条高度:50px;文本对齐:居中;边框:1px实心#12346;边距底部:5px;}跨度{显示:内联块;垂直对齐:中间;线高度:正常;}<div><span>Lorem ipsum dolor坐amet,consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet,consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet,consectetur adipiscing elit</span></div><div><span>Lorem ipsum dolor坐amet,consectetur adipiscing elit</span></div><div><span>Lorem ipsum dolor坐amet</span></div><div>
我看到了前面的答案,它们只适用于屏幕的宽度(没有响应)。对于反应灵敏的用户,您必须使用flex。
例子:
div { display:flex; align-items:center; }
满足所有垂直对齐需求!
声明此Mixin:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
然后将其包含在元素中:
.element{
@include vertical-align();
}
您可以在CSS中使用定位方法:
检查此处的结果。。。。
HTML格式:
<div class="relativediv">
<p>
Make me vertical align as center
</p>
</div>
CSS:
.relativediv {
position: relative;
border: 1px solid #DDD;
height: 300px;
width: 300px
}
.relativediv p {
position: absolute;
top: 50%;
transfrom: translateY(-50%);
}