CODEWITHSUNDEEP
htmlcss
user3075987
user3075987

Reputation: 881

How do align images vertically centers with CSS and HTML?

I'm trying to center these logos vertically in my div. How would I do that?

Here's my jsfiddle: https://jsfiddle.net/huskydawgs/vm4d3a1q/1/

Here's my 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>

Here's my 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%;
}

Upvotes: 1

Views: 44

Answers (2)

Andrew
Andrew

Reputation: 2975

you can achieve this with display table too which is supported from 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;
    }

Here's a JsFiddle JsFiddle Example

Upvotes: 1

Sergio Marron
Sergio Marron

Reputation: 521

Change justify-content: center for align-items: center

Like this:

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

Upvotes: 1

Related Questions