3-12中如何实何实现标题的垂直居中呀？老师，看下我代码？如果直接对h1设置好像没有用呢？

首页课程实战体系课手记专栏慕课教程

来源：3-12 编程练习

shine62

2019-01-23 20:40:25

<!DOCTYPE html>

<html>

<head>

<title>vertical-align</title>

*{padding:0px;margin: 0px;}

.warp1{

height:80px;

width: 100%;

background-color: #14191e;

text-align:center;

/*在此补充代码*/

}

span{vertical-align:middle;}

.warp1 h1{ color:#fff;

/*在此补充代码*/ }

.warp2{

height:400px;

width: 100%;

border:1px #14191e solid;

/*在此补充代码*/

}

.content{

line height:1.5em;

font-size:14px;

text-align:left;/*在此补充代码*/

}

.content p{ width:500px;

font-family: "微软雅黑";

margin:0 auto;

/*在此补充代码*/}

</style>

</head>

<body>

<h1><span>欢迎来到慕课网</span></h1>

</div>

<p>慕课网，只学有用的！</p>

<p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>

</div>

</body>

</html>

写回答

1回答

Steve007

2019-01-24

同学，你好。这里对h1直接设置不管用是因为在h1中又包裹了一个span标签，span标签是行内元素，对span设置高是不生效的，这里直接将标题放在h1标签中，然后对h1设置垂直居中就会生效了。如图：

祝学习愉快！

hteve007

hhine62

h 同学，你好。vertical-align：middle属性是定义行内元素（内联元素）的基线相对于该元素所在行的基线的垂直对齐，它确实是只对于内联元素生效。而line-height是设置块级元素中文本的垂直居中。

h019-01-24

共2条回复

0 学习 · 36712 问题

查看课程

相似问题

div包裹了p.实现垂直居中为什么用上一个div无效呢？

回答 5

请老师看一下代码，为何还是实现不了水平居中和垂直居中

回答 3

为什么使用类选择器无法使图片垂直居中，而标签选择器却可以使图片垂直居中。

回答 1

3-4垂直居中问题

回答 3

老师请问我的代码是否正确？

回答 1

打开慕课网App查看更多内容