鍍金池/ 問(wèn)答/HTML5  數(shù)據(jù)庫(kù)  HTML/ 如何讓兩個(gè)img在div居中

如何讓兩個(gè)img在div居中

如何讓兩個(gè)img在div中垂直居中 樣式得怎么寫(xiě)

                                            </div>
                                            <div class="card-right">
                                                <!-- <div> -->
                                                    <span class="img-box"><img src="/Uploads/temp/test/pic1.jpg"></span>
                                                    <span class="img-box"><img src="/Uploads/temp/test/pic2.jpg"></span>
                                                <!-- </div> -->
                                            </div>

.img-box{

height: 45%;
width: 100%;
display: block;

}
.img-box>img{

width: 100%;
height: 100%;

}

回答
編輯回答
妖妖

為啥要用span去包img？
要實(shí)現(xiàn)垂直居中又很多方法，個(gè)人推薦用flex布局，類似這樣：

//html
<div>
  <img/>
  <img/>
</div>
//css
 div{
  display:flex;
  align-item:center
}
div>img{
//自定義高度與寬度
}

如果要學(xué)flex布局，推薦阮一峰的。

2017年2月16日 05:46
編輯回答
愚念
.b{display:block;width:150px;height:200px;text-align:center;overflow:hidden;}
.for-vertical{display:inline-block;height:100%;vertical-align:middle;} 
.b img{vertical-align:middle;border:none;padding:0;} 
img{width:130px;}
.article{float:left;}

<div class="article">
        <a href="#" class="b"><span class="for-vertical"></span><img src="6.jpg" alt="馬泡瓜" /></a>
    </div>
    <div class="article">
        <a href="#" class="b"><span class="for-vertical"></span><img src="hot.png" alt="馬泡瓜" /></a>
    </div>
    <div class="article">
        <a href="#" class="b"><span class="for-vertical"></span><img src="2.jpg" alt="馬泡瓜" /></a>
    </div>

兼容IE低版本

2018年3月15日 22:01
編輯回答
葬愛(ài)
.img-box>img{
    vertiacl-align:middle;
}
2017年9月10日 09:13
編輯回答
巷尾
img-box>img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
2018年3月4日 13:03