我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
您可以使用以下代码段作为参考。这对我来说就像一种魅力:
html,正文{高度:100%;边距:0;填充:0;宽度:100%;}正文{显示:表格;}.居中文本{文本对齐:居中;显示:表格单元格;垂直对齐:中间;}<div class=“居中文本”><h1>是的,这是我的登录页</h1><h2>正在建设中,即将到来</氢气></div>
上述代码段的输出如下:
其他回答
.text{
background: #ccc;
position: relative;
float: left;
text-align: center;
width: 400px;
line-height: 80px;
font-size: 24px;
color: #000;
float: left;
}
.element{position: relative;top: 50%;transform: translateY(-50%);}
将此小代码添加到元素的CSS属性中。太棒了。试试看!
您可以尝试以下基本方法:
第二部分{高度:100px;线条高度:100px;文本对齐:居中;边框:2px虚线#f69c55;}<div>你好,世界!</div>
但它只适用于单行文本,因为我们将行的高度设置为与包含框元素相同的高度。
更通用的方法
这是垂直对齐文本的另一种方式。此解决方案适用于单行和多行文本,但仍需要固定高度的容器:
第二部分{高度:100px;线条高度:100px;文本对齐:居中;边框:2px虚线#f69c55;}跨度{显示:内联块;垂直对齐:中间;线高度:正常;}<div><span>你好,世界</span></div>
CSS只是调整<div>的大小,通过将<div>线的高度设置为等于其高度来垂直居中对齐<span>,并使<span>成为具有垂直对齐:中间的内联块。然后,它将<span>的线高度设置回正常值,因此其内容将在块内自然流动。
模拟表显示
这里还有另一个选项,它可能在不支持display:table和display:tablecell(基本上只有InternetExplorer7)的旧浏览器上不起作用。使用CSS,我们模拟表行为(因为表支持垂直对齐),HTML与第二个示例相同:
第二部分{显示:表格;高度:100px;宽度:100%;文本对齐:居中;边框:2px虚线#f69c55;}跨度{显示:表格单元格;垂直对齐:中间;}<div><span>你好,世界</span></div>
使用绝对定位
该技术使用绝对定位的元素,将顶部、底部、左侧和右侧设置为0。这在《粉碎杂志》的一篇文章中有更详细的描述,《CSS中的绝对水平和垂直居中》。
第二部分{显示:柔性;对齐内容:中心;对齐项目:居中;高度:100px;宽度:100%;边框:2px虚线#f69c55;}<div><span>你好,世界</span></div>
尝试转换属性:
#盒子{高度:90px;宽度:270px;位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>
我只想扩展Michielvoo的答案,以释放对线高度和呼吸div高度的需求。它基本上只是这样一个简化版本:
第二部分{宽度:250px;/*高度:100px;线条高度:100px*/文本对齐:居中;边框:1px实心#12346;背景色:#bbbbff;填充:10px;边距:10px;}跨度{显示:内联块;垂直对齐:中间;线高度:正常;}<div><span>所有的成年人都曾经是孩子。。。但只有少数人记得</span></div><div><span>现在这是我的秘密,一个非常简单的秘密:只有用心才能看清真相;本质的东西是肉眼看不见的</span></div>
注:注释了封闭分区固定高度所需的cssis部分。