这图片为什么水平垂直都不居中？

Question

代码http://js.jirengu.com/zotex/1...

Answer 1

.wrapper4 {
    width: 300px;
    height: 300px;
    border: 1px solid green;
    margin - left: auto;
    margin - right: auto;
    display: table;
    margin - bottom: 60px;
    text - align: center;

}
.wrapper4 img {
    width: 100px;
    height: 100px;
}
.wrapper4 div {
    width: 100px;
    height: 100px;
    display: table - cell;
    vertical - align: middle;
}

<div class="wrapper4">
    <div><img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗"></div>
    
  </div>

需要在外面包裹一层div

Answer 2

Answer 3

Answer 4

还没看为什么不能。但是我知道怎么能让它居中。
此处用了flex布局 Flex 布局教程:语法篇 - 阮一峰的网络日志

Answer 5

.wrapper4{
    width: 300px;
    height: 300px;
    border: 1px solid green;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
   }
.wrapper4 img{
    width:100px;
    height:100px;
}

你把table-cell放错地方了，这个要用于放图片的容器中，而不是对图片使用table-cell。
组合使用display:table-cell和vertical-align、text-align，是使父元素内的所有行内元素水平垂直居中，img怎么当父元素呢？