如何使圖像垂直居中對齊CSS和HTML？

我試圖在我的div中垂直居中這些標識。我會怎麼做？如何使圖像垂直居中對齊CSS和HTML？

這裏是我的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%; 
}

來源

2015-09-03 user3075987

可能重複支持實現這一目標[垂直對齊圖像旁邊的文本？]（http://stackoverflow.com/questions/489340/vertically-align-t ext-next-a-image） – AleshaOleg

我在每個div上都放了一個邊框，圖像看上去已經很漂亮了。 – nextstep

變化justify-content: center爲align-items: center

像這樣：

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

來源

2015-09-03 19:13:53

這沒有什麼區別 – nextstep

它爲我工作，檢查[this]（https://jsfiddle.net/tinmarin60/vm4d3a1q/8/） –

您可以顯示錶過這是從IE 8+

CSS

.container-5col { 
    display: table; 
} 

    .container-5col > div { 
     width: 20%; 
     margin: 10px; 
     padding: 10px; 
     text-align: center; 
     display: table-cell; 
     vertical-align: middle; 
    }

這裏有一個的jsfiddle JsFiddle Example

來源

2015-09-03 19:18:20 Andrew

如何使圖像垂直居中對齊CSS和HTML？

回答

相關問題