多行文字不垂直居中
张鑫旭大神博客中讲到使用table-cell来实现多行文字的垂直居中
http://www.zhangxinxu.com/wor...
按照文中方法写了测试demo,并没有垂直居中,是我哪里遗漏了?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div><span>处理文字的垂直居中处理文字的垂直居中处理文字的垂直居中处理文字的垂直居中处理文字的垂直居中处理文字的垂直居中</span></div>
</body>
</html>
<style>
div{
display: table-cell;
width: 550px;
height: 1.14em;
padding: 0 0.1em;
border: 4px solid #beceeb;
color: #069;
font-size: 10em;
vertical-align: middle;
}
span{
display: inline-block;
font-size: 0.1em;
vertical-align: middle;
}
</style>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
亲自测试了,相对于外面的DIV框的确垂直居中了,望采纳。