老师帮我检查一下,还有什么地方需要改进的吗?

老师帮我检查一下,还有什么地方需要改进的吗?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
 <title>CSS布局</title>
 <style type="text/css">
  *{margin: 0;padding: 0;}
  .container{width: 1000px;margin: 0 auto;}
  .content{width: 1000px;margin-left: 130px;}
  h3{text-align: center;
   padding-top: 20px;}
  .container .com{float: left;
    padding:10px;
   }
  .container .com img{
   width: 350px;
  }
  .hanzi{font-size: 15px;
      font-weight: bold;}
 </style>
</head>
<body>
 <div class="container">
 <h3>ENJOY&nbsp;&nbsp;THE&nbsp;&nbsp;LIFE</h3>
 <div class="content">
  <div class="com">
   <div>
    <img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg">
   </div>
   <div class="hanzi">Life is like a book, just read more and more <br/>refined, more write more carefully. when read,<br/>
    mind open, all things have been indifferent to<br/>heart. Life is the precipitation.</div>
  </div>
  <div class="com">
   <div>
    <img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg">
   </div>
   <div class="hanzi">Life is like a cup of tea,&nbsp;&nbsp;let people lead a <br/>person to endless aftertastes. You again good<br/>
    taste,&nbsp;&nbsp;it will always have a different taste, <br/>different people will have different taste <br/>more.</div>
  </div>
 </div>
 </div>
</body>
</html>

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

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

3回答
好帮手慕夭夭 2019-04-21 18:56:36

你好同学,再看一下老师上一次回复中的代码截图解释哦。text-align: center;不可以让块元素居中,所以不设置inline-block 肯定是不生效的。但是它可以让行内块元素居中,所以需要给它设置成inline-block 。这样父元素的text-align: center;就可以让子元素行内块元素居中哦。

  • 提问者 原来是晓琪_ #1
    老师 text-align属性是只对块级元素起作用吧? 设置成block属性值为什么不可以呢
    2019-04-21 19:06:44
  • 好帮手慕夭夭 回复 提问者 原来是晓琪_ #2
    同学记错了哦, text-align本身是设置文本居中的,但是也可以让行内元素或者行内块元素居中,不可以让块元素居中哦。这里重新理解一下。
    2019-04-22 09:40:10
提问者 原来是晓琪_ 2019-04-21 17:50:16

老师 一是  为什么要把content里的内容变成display:inline-block content本身不就是快元素吗
二是为什么不加display这个他就不能居中显示呢?

好帮手慕夭夭 2019-04-21 17:30:48

你好同学,因为子元素设置了浮动,所以如下父元素盒子高度是塌陷的:

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

给content设置overflow: hidden;清除浮动。另外,它的宽度也设置的很大,这样内容铺不满,右边剩余的空间太多,所以内容不能居中显示

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

居中可以如下设置:

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

另外,如上设置会让文本内容受到影响,所以文本单独设置一个左对齐更好哦

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

祝学习愉快 ,望采纳。

  • 提问者 原来是晓琪_ #1
    老师 一是 为什么要把content里的内容变成display:inline-block content本身不就是快元素吗 二是为什么不加display这个他就不能居中显示呢?
    2019-04-21 17:52:17
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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