Question

我正试图将这些徽标垂直放在我的div中。我该怎么做？

这是我的jsfiddle： https://jsfiddle.net/huskydawgs/vm4d3a1q/1/

这是我的HTML：

<div class="container-5col">
<div class="box-5col-1">
    <img src="http://cdn.gottabemobile.com/wp-content/uploads/2012/05/sprint-logo1-620x308.jpg" alt="Sprint" width="115" height="67" /></div>
<div class="box-5col-2">
    <img src="http://cdn-3.famouslogos.us/images/bank-of-america-logo.jpg" alt="Bank of America" width="179" height="30" /></div>
<div class="box-5col-3">
    <img src="http://www.underconsideration.com/brandnew/archives/Dell_Logo_Tagline.jpg" alt="Dell" width="92" height="94" /></div>
<div class="box-5col-4">
    <img src="http://www.unitedrentals.com/static/images/ur-logo.png" alt="United Rentals" width="146" height="39" /></div>
<div class="box-5col-5">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Ford_Motor_Company_Logo.svg/2000px-Ford_Motor_Company_Logo.svg.png" alt="United Rentals" width="117" height="45" /></div>

这是我的CSS：

.container-5col {
display: flex;
justify-content: center;
}

.container-5col > div {
    margin: 10px;
    padding: 10px;
    text-align: center;
}

.box-5col-1 {
    width: 20%;
}

.box-5col-2 {
    width: 20%;
}

.box-5col-3 {
    width: 20%;
}

.box-5col-4 {
    width: 20%;
}

.box-5col-5 {
    width: 20%;
}

Answer 1

更改justify-content: center

的align-items: center

像这样：

.container-5col {
    display: flex;
    align-items: center;
}

Answer 2

你也可以用IE 8 +

支持的显示表来实现这一点

CSS

org.apache.commons.lang3

这是一个JsFiddle {{3}}

如何使用CSS和HTML垂直对齐图像？

2 个答案: