我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
.text{
background: #ccc;
position: relative;
float: left;
text-align: center;
width: 400px;
line-height: 80px;
font-size: 24px;
color: #000;
float: left;
}
其他回答
您可以尝试以下基本方法:
第二部分{高度: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>
<!DOCTYPE html>
<html>
<head>
<style>
.main{
height:450px;
background:#f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<h1>Hello</h1>
</div>
</body>
</html>
一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右:
margin-top: 45%;
你可能需要玩这个数字,但它将位于周围分区的中心。
这是使用Flexbox的另一个选项。
#集装箱{显示:柔性;高度:200px;背景:橙色;}.儿童{边距:自动;}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠,尼莫</span></div></div>
后果
这里有一篇关于CSS居中的好文章。过来看。
这很简单,也很短:
.块{显示:表格行;垂直对齐:中间;}.平铺{显示:表格单元格;垂直对齐:中间;文本对齐:居中;宽度:500px;高度:100px;}<div class=“body”><span class=“tile”>你好,中间世界!:)</span></div>