请问老师为什么这样设置不能垂直居中呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.warp{
width: 100%;
height:400px;
border 1px solid red;
text-align: center;
}
.content{
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="warp">
<div class="content">
<img src="img\logo.jpg" alt="">
<h1>Welcome to Website</h1>
<h2>CSS层叠样式,用于网页设置,使网页更美观。</h2>
</div>
</div>
</body>
</html>
4
收起
正在回答
2回答
同学你好,带有多行文本内容的垂直居中不能结合display: inline-block;和vertical-align: middle;实现垂直居中效果,在已知固定宽度和高度的情况下可以使用定位的方式实现垂直居中显示,比如:
另外一种实现方式就是“好帮手慕闫”老师说的结合表格的属性来实现垂直居中了
希望可以帮到你!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星