请老师检查及优化代码

来源:2-7 编程练习

慕函数4234673

2019-11-09 14:13:30

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

.middle{width:600px;

    height:400px;

    border:1px solid red;

    margin:0 auto;

}

.middle p{text-transform:uppercase;font-weight:bolder;text-align:center;margin-top:50px;}


.middle1 .right{float:left;

  

}

.middle1 p{width:150px;text-align:center;margin-top:10px;}

.middle1{width:600px;}

.right img{width:150px;}

.middle .right{margin-left:100px;}


</style>

</head>

<body>

<div class="middle">

    <p>enjoy the life</p>

    <div class="middle1">

        <div class="right">

        <img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg"/>

        <p>ndhfdtyi jkeyrop345 nreo;tiu ew;kyg[1 lw.yi;o,mjht;v hgkl;etjnftw,</p>

        </div>

        <div class="right">

        <img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg"/>

        <p>jhfieru lktjepwt ltjw[roiyu lr;etj[w4 lsrkj' l.jy lrew;yj'w lyj wl. ls/rjy</p>

        </div>

    </div>

</div>

</body>

</html>


写回答

1回答

好帮手慕言

2019-11-09

同学你好,图片下方的文字不需要居中显示。

建议:去掉text-align: center

代码参考:

http://img.mukewang.com/climg/5dc668340901471704340203.jpg

http://img.mukewang.com/climg/5dc6684c090f80ce04580272.jpg

为了更美观,同学可以根据效果图修改一下图片下方的文字哦。

祝学习愉快~

0

0 学习 · 40143 问题

查看课程