我写的页面图片为什么无法居中，请问应该怎么改？

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    .out{width:80%;height:550px;margin:60px auto;}
    .out .top{width:100%;height:400px;background:rgb(124,225,228);}
    .out .top .left{display:block;float:left;margin:auto 80px;}
    .out .top .right{display:block;float:right;margin:auto 80px;}
    .bottom{width:100%;height:150px;background:rgb(255,128,255);}
    .container{margin:auto auto;}
    .pic{display:block;float:left;margin:auto 30px;}/*此处写代码*/
</style>
</head>
<body>
<div class="out">
      <div class="top">
          <img class="left" src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
          <img class="right" src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
      </div>
      <div class="bottom">
          <div class="container">
              <img class="pic" src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
              <img class="pic" src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
              <img class="pic" src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
          </div>
      </div>
</div>
</body>
</html>

帝小君 2018-01-11

源自：CSS网页布局基础 2-14 编程练习

收起

3回答

好帮手慕糖回答被采纳获得+3积分 2018-01-12 09:23:10

你好，设置给图片时可以哦，你这了需要设置宽高是因为你设置的是.four这个div，该div中什么都没有，要是不设置个宽高，边框，就算居中了也看不到呀。但是图片时有本身的宽高的，虽然不能确定宽高是多少，但是不能说它没有，例：如下代码，图片就是可以居中的哦。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
.one {
    width: 400px;
    height: 400px;
    background: red;
    border: 1px solid;
    position: relative;
}
.two img{
   position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
}
</style>
<body>
    <div class="one">
        <div class="two"> <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"> </div>
    </div>
    <div class="three">
        <div class="four"></div>
    </div>
</body>
</html>

祝学习愉快~

收起回答

帝小君提问者 #1

谢谢老师的讲解

2018-01-12 15:26:10

好帮手慕糖 2018-01-11 20:31:45

你好，既然设置看固定的宽度，也可以设置固定的高度呀。或者可使用定位：例；

position: absolute;
right: 0;
top:0;
left: 0;
bottom: 0;
margin: auto auto;

祝学习愉快~

收起回答

提问者帝小君 #1

我自己试了下，使用拔河效应，必须写出固定定位div的宽高值，可是无法确定图片的宽高，无法写出宽高值。图片不能居中。您可以看一下我自己试验的代码 <!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> .one{width:400px;height:400px;background: red;border:1px solid;position:relative;} .two{top:0;bottom:0;left:0;right:0;margin:auto auto;position:absolute;} .three{width:400px;height:400px;background: red;border:1px solid;position:relative;} .four{position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid;width:200px;height:200px;margin:auto auto;} </style> <body> <div class="one"> <div class="two"> <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"> </div> </div> <div class="three"> <div class="four"></div> </div> </body> </html>

2018-01-11 22:50:15