老师看看我效果对不对，另外有个属性问题
<!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;
text-align:center;
/*在此补充代码*/
display:table;
}
.warp1 h1{ color:#fff;
/*在此补充代码*/
font-size:24px;
display:table-cell;
vertical-align:middle;
}
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
text-align:left;
display:table;
/*在此补充代码*/
}
.content{
/*在此补充代码*/
vertical-align:middle;
display:table-cell;
/*text-align:center;*/
}
.content p{ width:500px;
font-family: "微软雅黑";
font-size:14;
line-height:1.5em;
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>
</body>
</html>我.content{}内有句注释/*text-align:center*/,取消注释后，文字是居中对齐的。
意思是它虽然有单元格属性，但它依然是块级元素，text-align对它有效吗？
还有marign:0 auto效果是设置整体水平居中吗？
16
收起
正在回答
2回答
同学你好，样式存在书写不规范，如下：
字体大小，要设置单位，如下：
问题解答如下：
1. text-align:center；可以设置文字居中对齐，并且它是可继承属性，所以给“content”设置text-align后，p标签会继承该属性，然后p标签内的文字会水平居中对齐。
2. text-align:center；还会让行内块元素水平居中（display: inline-block;），但它无法让display: table-cell;的元素水平居中。严格的讲display: table-cell;的元素，不属于块级元素，它是让元素作为一个表格单元格显示，类似 <td> ，所以显示效果是按照单元格那样显示。
3. marign:0 auto是设置设置了宽度的块级元素水平居中，同学先了解即可，以后会讲到。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星