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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本样式</title>
        <style type="text/css">
           p{background: #eee;height: 150px;line-height: 5em;text-align: center;}
           .one{vertical-align: -35px}
           .two{font-size: 2em;vertical-align: -25px}
           .three{vertical-align: -15px;color: red;text-decoration: underline;}
        </style>
    </head>
    <body>
          <p><span class="one"><img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"></span><span class="two">CSS层叠样式表</span><span class="three">（Cascading Style Sheets）</span></p>
    </body>
</html>

qq_鸭绿桥第一帅哥_0 2018-10-23

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

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2018-10-23 19:11:56

你好同学 , 效果没有实现文字图片居中对齐 :

建议如下设置使内容都垂直居中对齐 :

使用vertical-align: middle;更方便一些哦

完善一下吧 ,祝学习愉快 !

收起回答

qq_鸭绿桥第一帅哥_0 提问者 #1

老师，为什么.one{vertical-align: middle;}这行代码没有使图片垂直居中，而 img{vertical-align: middle;}这行代码却使图片垂直居中了？

2018-10-23 22:12:17
好帮手慕夭夭回复提问者 qq_鸭绿桥第一帅哥_0 #2

.one是图片的父元素 , 图片需要直接加上它身上才可以 . 如果是文本内容 , 加在父元素身上才会起作用的 .

2018-10-24 09:40:01