老师想问的问题太多在</html>后面写了望解答

<!DOCTYPE html>

<html>

<head>

<title>vertical-align</title>

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

.warp1{

height:80px;

width: 100%;

background-color: #14191e;

display:table; /*在此补充代码*/

}

.warp1 h1{ color:#fff;

vertical-align:middle;

display:table-cell;

text-align:center;

/*在此补充代码*/ }

.warp2{display:table;

height:400px;

width: 100%;

border:1px #14191e solid;

/*在此补充代码*/

}

.content{vertical-align:middle;

display:table-cell;

line-height:1.5em;

font-size:14px;

/*在此补充代码*/

}

.content p{width:500px;

font-family: "微软雅黑";

margin:0 auto;

/*在此补充代码*/}

</style>

</head>

<body>

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

</div>

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

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

</div>

</body>

</html>

老师为什么我只在h1标签上添加了水平居中样式后面再添加水平居中样式会影响到后面的P标签呢？如果影响了为什么”慕课网只学有用的“这几个字没有被影响？为啥vertical标签的属性值没有被继承？

qq_命运_szFJMV 2018-11-04

源自：CSS文本样式 3-12 编程练习

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2018-11-06 09:41:04

同学的意思是给如下h1标签设置了 vertical-align: middle;被后面的p标签继承 ,但是h1标签的 text-align: center;属性没有被继承吗 ?

继承只会发生在父元素的属性被子元素继承 ,通过上图就可以看出来 , 从结构上 , h1与p元素并不是父子关系 .所以不存在同学所说的继承 . 另外 ,两个 p元素的内容之所以可以水平垂直居中 ,是因为设置如下属性:

同学可以测试一下 ,去掉如上两个属性 , p的内容是不会水平垂直居中的 .这里不存在继承h1的属性 .

希望解答了你的疑惑, 祝学习愉快 ,望采纳 .

收起回答

好帮手慕夭夭 2018-11-05 12:04:50

你好同学 , 问题中"只在h1标签上添加了水平居中样式后面再添加水平居中样式会影响到后面的P标签"不是太明白 , 请同学在具体描述一下 . 另外,不是所有的css样式都会被子元素继承的 . 有一些属性的是不会被继承的 , 同学可以在浏览器中按F12 , 查看如下:

祝学习愉快 !

收起回答

提问者 qq_命运_szFJMV #1

我的意思是我只在H1标签中添加了vertical-align和text-align这两个属性为社么P标签中的内容也会水平居中垂直居中，如果p标签继承了这两个属性为什么第一行的文字没有受到text-align标签的影响居中呢？就是这些方面我有点疑问。

2018-11-05 21:14:45