老师请问为什么实现不了图片居中?

老师请问为什么实现不了图片居中?

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

/*此处写代码*/

*{margin:0;padding:0;}

.page{width:100%;}

.word{width:100%;

     text-align:center;

      font-size:20px;

      font-weight:bold;

      font-family:"宋体";

      padding:10px;}

      

  .container{width:100%;

            text-align:center;}   

  .container .left,.right{float:left;

                          padding:10px;

                          text-align:center;

  } 

  


</style>

</head>

<body>

<!-- 此处写代码 -->

<div class="page">

    <div class="word">ENJOY THE LIFE</div>

</div>

  <div class="container">

    <div class="left">

        <div><img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg"></div>

    <div>life is book life is book life is book life is book life is<br/>  book life is book life is book life is book life is book life is<br/> book life isbook life is book life is book  life is book</div>

    </div>

    <div class="right">

        <div><img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg"></div>

    <div>life is book life is book life is book life is book life is<br/>  book life is book life is book life is book life is book life is<br/> book life isbook life is book life is book  life is book</div>

    </div>

</div>

</body>

</html>


正在回答

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

1回答

你好,

每个图片和文字用div块包裹,text-align:center;属性不会实现块元素居中显示,文本或者内联元素是可以居中显示的。

建议将container盒子设置固定宽度,用margin实现居中显示,一个图片左浮动,一个图片右浮动,参考:

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

自己可以重新测试下,祝学习愉快!

  • 慕大斯 提问者 #1
    谢谢老师,也就是说ext-align:center属性只能设置文本或者内联元素居中?
    2019-06-19 14:14:30
  • 慕大斯 提问者 #2
    还有一个问题,为什么要设置.right右浮动?有什么区别么?
    2019-06-19 14:22:25
  • 好帮手慕星星 回复 提问者 慕大斯 #3
    是的,理解没有问题。 右侧图片设置右浮动之后就可以不用设置两张图片之间的间隙了,这样比较方便,一个靠左一个靠右。
    2019-06-19 15:11:16
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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