我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
您可以在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%);
}
其他回答
一个非常简单和最强大的垂直对齐中心的解决方案:
.外部div{高度:200px;宽度:200px;文本对齐:居中;边框:1px实心#000;}.内部{位置:相对;顶部:50%;变换:translateY(-50%);颜色:红色;}<div class=“outer div”><span class=“inner”>无可用数据</span></div>
较新的浏览器现在支持CSS calc功能。如果您针对的是这些浏览器,您可能需要考虑这样做:
<div style=“位置:相对;宽度:400px;高度:400px,背景色:红色”><span style=“位置:绝对;行高:40px;高度:80px;文本对齐:居中;宽度:300px;溢出:隐藏;顶部:计算(50%-40px);左侧:计算(50%-150px);”>这里有两条线,即使父div改变大小,也会居中。</span></div>
关键是在绝对或相对定位的父除法中使用style=“top:calc(50%-[inerFixedHeightInPX/2]px);height:[inerFixed HeightInPX;”。
无论您想要垂直居中样式,都可以尝试显示:表格单元格和垂直对齐:中间。
例子:
#盒子{显示:表格单元格;垂直对齐:中间;高度:90px;宽度:270px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;页边空白:20px;左边距:5px;}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</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支持,必须将::替换为:。
您可以通过添加以下CSS代码轻松完成此操作:
display: table-cell;
vertical-align: middle;
这意味着您的CSS最终看起来像:
#盒子{高度:90px;宽度:270px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;页边空白:20px;左边距:5px;显示:表格单元格;垂直对齐:中间;}<div id=“box”>一些文本</div>