图片水平垂直置中

<div class='box'>
  <img src='http://placeimg.com/320/180/nature'/>
</div>
<div class='box'>
  <img src='http://placeimg.com/180/320/nature'/>
</div>
<div class='box'>
  <img src='http://placeimg.com/320/320/nature'/>
</div>
<div class='box'>
  <img src='http://placeimg.com/100/100/nature'/>
</div>

分別是4個box,作為img的容器,裡面各有一張圖片

接下來是CSS的部分

.box {
    position: relative;
    background: gray;
    height: 200px;
    width: 200px;
    float: left;
    margin: 10px;
}
.box img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max - height: 100 % ;
    max - width: 100 % ;
}

設定box的寬高皆為200px以及positionrelative

然後設定imgpositionabsolute,接著是top, right, bottom, left皆為0

讓圖片的空間為整個box,且疊在box的上面

然後設定marginauto,讓其位置上下左右置中

最後是max-heightmax-width為100%,避免圖片超出box的大小

透過這樣的設定,就可以達成垂直水平置中,且不需要額外的HTML TAG

缺點:Windows Phone無法正常使用

 

来源:http://shinychang.net/article/52de790fdca870921b3a4b98

Leave a Reply