如何让两个图片在div居中

Question

如何让两个img在div中垂直居中 样式得怎么写

                                            </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%;

}

Answer 1

可以试试flex

Answer 2

.card-right {
  border: 1px solid;
  height: 300px;
  display: flex;
  align-items: center;
}
.img-box{
height: 45%;
width: 100%;
}
.img-box>img{
width: 100%;
height: 100%;
}

附上flexbox简易教程，Flex 布局教程：语法篇，自己去看看吧，你想要的都有

Answer 3

最简单的就是flex布局了，知道几个关键的属性flex-flow,justify-content, align-items就能搞定了