老师帮忙看一下对不对?

老师帮忙看一下对不对?

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文本样式</title>

        <style type="text/css">

           /*写出CSS样式*/

           p{background-color:#eee;

               font-size:2em;

               line-height:5em;

           }

           .one{font-size:2em;}

           .two{color:red;

               text-decoration:underline;

               text-transform:capitalize;

               vertical-align:middle;

           }

        </style>

    </head>

    <body>

          <!--写出html代码-->

          <p>

          <img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg">

          <span class="one">CSS层叠样式表</span>

          <span class="two">(cascading style sheets)</span>

          </p>

    </body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
Sherlock_bourne 2019-02-19 14:22:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标答版用px来调节垂直居中</title>
<style type="text/css">
.div1{
background-color:#eee;
height:5em;
width:100%;
text-align:center;
display:table;
font-size:2em;
}
.div2{
display:table-cell;
vertical-align:middle;
}
.css{
font-size:2em;
vertical-align:5px;
}
.words{
color:red;
text-decoration:underline;
vertical-align:15px;
text-decoration:underline;
text-transform: capitalize;
}

</style>
</head>
<body>
<div class="div1">
<div class="div2"> <img src=" http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg">
<span class="css">CSS层叠样式表</span>
<span class="words">(cascading style sheets)</span>
</div>
</div>
</body>
</html>


Steve007 2019-02-18 14:51:54

同学,你好。这里需要给.one,.two,img都设置vertical-align:middle;它们才会在同一行居中。

如图:

http://img1.sycdn.imooc.com//climg/5c6a55ff000190d307950243.jpg

祝学习愉快!

  • 你这也只是实现水平居中,左右没有居中。而且,tow没有相对于one居中。
    2019-02-19 13:51:14
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师