老师好，请问我的代码问题出在哪里 我按照本节视频中老师的方法为什么不能够水平居中呢？
<!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;
/*在此补充代码*/
}
.title{display: table-cell;
vertical-align: middle;
font-size: 24px;
}
.warp1 h1{ color:#fff;
/*在此补充代码*/ }
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
/*在此补充代码*/
display: table;
}
.content{
/*在此补充代码*/
font-size: 14px;
line-height: 1.5em;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content p{ width:500px;
font-family: "微软雅黑";
/*在此补充代码*/}
</style>
</head>
<body>
<div class="warp1">
<h1 class="title">欢迎来到慕课网</h1>
</div>
<div class="warp2">
<div class="content">
<p>慕课网，只学有用的！</p>
<p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>
</div>
</div>
</body>
</html>
正在回答
同学你好，是因为视频的代码中，内容没有设置固定的宽度，那么文字的父元素宽度是相对浏览器宽度100%显示的。设置text-align: center 是让文字在父元素中居中，你可以代码中p的宽度去掉：
p的文字是相对p元素居中的
当设置固定宽度，p里面的内容还是相对p水平居中的，只不过p元素没有在页面中居中。所以这里是需要设置p相对页面居中的。p是块元素，块元素设置居中要使用margin:0 auto。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星