我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
无论您想要垂直居中样式,都可以尝试显示:表格单元格和垂直对齐:中间。
例子:
#盒子{显示:表格单元格;垂直对齐:中间;高度:90px;宽度:270px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;页边空白:20px;左边距:5px;}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>
其他回答
简单而通用的方法是表格方法):
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性(或等效的类)甚至可以使许多子标记对齐:
<parent ctrv> <ch1/> <ch2/> </parent>
无论您想要垂直居中样式,都可以尝试显示:表格单元格和垂直对齐:中间。
例子:
#盒子{显示:表格单元格;垂直对齐:中间;高度:90px;宽度:270px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;页边空白:20px;左边距:5px;}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>
灵活的方法
第二部分{宽度: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>
我不确定是否有人走上了写作模式的道路,但我认为它彻底解决了问题,并得到了广泛的支持:
.垂直{//边框:1px实心绿色;写入模式:垂直lr;文本对齐:居中;高度:100%;宽度:100%;}.水平{//边框:1px纯蓝色;显示:内联块;书写方式:水平tb;宽度:100%;文本对齐:居中;}.内容{文本对齐:左侧;显示:内联块;边框:1px实心#e0e0e0;衬垫:.5em 1em;边界半径:1em;}<div class=“vertical”><div class=“horizontal”><div class=“content”>我以垂直和水平为中心</div></div></div>
当然,这将适用于您需要的任何维度(除了100%的父维度)。如果取消注释边界线,这将有助于熟悉自己。
JSFiddle演示供您摆弄。
犬只支持:85.22%+6.26%=91.48%(甚至Internet Explorer也支持!)
您还可以使用以下财产。
display: flex;
align-content: center;
justify-content : center;