请问这样可以吗? 然后还有一个问题
来源：3-12 编程练习
慕勒9893359
2019-03-20 07:52:12
<!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;
line-height:80px;
}
.warp1 h1{ color:#fff;
/*在此补充代码*/
font-size:24px;
}
.warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
/*在此补充代码*/
display:table;
}
.content{
/*在此补充代码*/
vertical-align:middle;
line-height:1.5em;
font-size:14px;
display:table-cell;
}
.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>
</body>
</html>写回答
2回答
-
好帮手慕星星
2019-03-20
你好，代码实现效果是正确的。
margin: 0 auto;是实现水平居中显示的，垂直方向上不能居中，转换成table-cell，使用vertical-align的方式是正确的。
实际中margin:0 auto;用的多一些，如果想要实现水平垂直居中显示，后面会学习到定位，定位方式实现比较简单。
祝学习愉快！
0 -
慕勒9893359
提问者
2019-03-20
以上我是按照vertical-align教学视频里说的用display:table和display:table-cell来实现的多行文字垂直水平居中, 任务提示里的margin:0 auto并没有用到, 因为我当时用了,但没有效果,请问正确应该是怎么用? 还有一般以后开发的时候用的display:table的办法比较多还是margin:0 auto用的多?
0
相似问题