请老师检查及优化代码
来源: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
代码参考:
为了更美观,同学可以根据效果图修改一下图片下方的文字哦。
祝学习愉快~
相似问题