求解，为什么我这段代码效果基本实现了，但就是图片跟文字，英文垂直居中不了呢？

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

来源：4-3 编程练习

Jokerjue

2019-03-16 19:34:54

<!DOCTYPE html>

<html>

<head>

/*补充代码*/

div{text-align: center;font-size:2em;bgcolor:#eee;line-height:5em;}

.text{font-size:2em;vertical-align: middle;}

.word{color:red;text-decoration: underline;text-transform:capitalize;vertical-align:middle;}

.img{vertical-align:middle;}

</style>

</head>

<body>

<div>

<p>

<span class="img"><img src="http://climg.mukewang.com/59c21bae000157fa01000059.jpg"></span><span class="text">css层叠样式表</span><span class="word">(casscading style sheets)</span>

</p>

</div>

</body>

</html>

写回答

2回答

樱桃小胖子

2019-03-20

已采纳

按照规范的定义，设置了vertical-align: text-bottom;的行内元素的底端将与父元素的文本行的底端对齐，简单的理解为：设置了vertical-align: text-bottom;的行内元素的底端将与其同在一个父元素内的文本低端对齐。如此，便可实现图片与文字低端对齐的效果。

希望可以帮到你！

樱桃小胖子

2019-03-17

同学布局代码不是很规范，老师这里写了一个例子，参考如下:

希望可以帮到你！

hokerjue

h 谢谢老师，但我还是搞不懂为什么是在img那单独设置text-bottom，那样不是单独针对父元素的顶部对齐吗

h019-03-20

共1条回复

0 学习 · 36712 问题

查看课程

相似问题

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

回答 5

4-3编程练习书写是否正确？为什么我的效果与练习效果有出入？

回答 2

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

回答 1

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

回答 1

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

回答 3

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