垂直3-9编程练习的疑问。
有一点疑问，我们给类名为“warp2”的div标签添加了一个 display：table 的属性，然后又给类名“content”的div标签添加了一个“display：table-small”单元格，此时我们可以用到垂直对齐的样式了，但是垂直对齐只能作用于行内元素，所以此时这个类名为“content”div标签变成了既是行内元素又是块级元素吗？这背后的原理是什么样的呢？ 希望老师可以给解一下疑惑。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
*{padding:0px;margin: 0px;}
.warp1{
height:80px;
width: 100%;
background-color: #14191e;
/*在此补充代码*/
line-height:80px;
text-align:center;
}
.warp1 h1{ color:#fff;
/*在此补充代码*/ }
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
/*在此补充代码*/
display:table;
}
.content{
/*在此补充代码*/
display:table-cell;
text-align:center;
vertical-align:middle;
line-height:1.5em;
font-size:14px;
}
.content p{ width:500px;
font-family: "微软雅黑";
margin:0 auto;
/*在此补充代码*/}
</style>
</head>
<body>
<div class="warp1">
<h1>欢迎来到慕课网</h1>
</div>
<div class="warp2">
<div class="content">
<p>慕课网，只学有用的！</p>
<p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>
</div>
</div>
</div>
</body>
</html>
正在回答
content原本是块状元素，设置display:table-cell;之后就变成了内联元素，就可以使用vertical-align:middle;属性了。
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星