头疼为啥单词部分无法居中？代码是一样的！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
p{background-color:#eee;
width: 100%;
height: 5em;
line-height:5em;
font-size:2em;
text-align:center;}
.span1{vertical-align:middle;}
.span2{font-size:2em;}
.span3{
text-decoration: underline;
vertical-align:middle;
color:red;}
/*写出CSS样式*/
</style>
</head>
<body>
<div>
<p>
<span class="span1"><img src=" http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"/></span>
<span class="span2">CSS层叠样式表</span>
<span class="span3">(Cascading Style Sheets)</span>
</p>
</div>
<!--写出html代码-->
</body>
</html>1
收起
正在回答
2回答
你好，后面的汉字和英文都设置vertical-align:middle;垂直居中之后，是不受前面图片是否使用span标签包裹影响的，主要是图片不能完全将span标签撑开：
图片外层的span标签是垂直居中显示的，但是图片看起来就不是了，所以需要将span标签去掉，直接使用img标签即可。
相似问题
我的页头部分为什么会消失?
11
0
4
为什么我的代码实现不了题目的要求？
18
0
3
水平居中和垂直居中问题？
19
0
3
这串代码的结果为什么是3个单词 ？不太理解这串代码的意思
14
0
3
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星