请问老师为什么这样设置不能垂直居中呢?

请问老师为什么这样设置不能垂直居中呢?

<!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>

http://img1.sycdn.imooc.com//climg/5dbd54fb09078c1908110064.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,带有多行文本内容的垂直居中不能结合display: inline-block;和vertical-align: middle;实现垂直居中效果,在已知固定宽度和高度的情况下可以使用定位的方式实现垂直居中显示,比如:

http://img1.sycdn.imooc.com//climg/5dbe94dd091c49d619120935.jpg

另外一种实现方式就是“好帮手慕闫”老师说的结合表格的属性来实现垂直居中了

希望可以帮到你!

好帮手慕言 2019-11-02 19:18:26

同学你好,如果要实现垂直居中,要配合表格使用。

代码参考(图片使用的是老师的):

http://img1.sycdn.imooc.com//climg/5dbd663209a2f3cb06250809.jpg

效果图:

http://img1.sycdn.imooc.com//climg/5dbd65de0905c15012000422.jpg

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 提问者 不明道理 #1
    我知道配合表格可以,我的意思是想让老师结合display: inline-block;来实现垂直居中
    2019-11-03 13:58:18
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师