Easiest way to vertically align, horizontally aligned images?

Question

What is the easiest, quickest way to vertically align differently sized horizontally aligned images? Everything on Google is not working for me or I'm not doing it right... I've tried using the 'vertical-align' property in .media and .media img.

Here's my jsfiddle: http://jsfiddle.net/C8DKc/

HTML

<div id="main">
    <div id="avatar">
        <img src="http://i.imgur.com/GgxBXAA.png" />
    </div>
    <div class="media">
        <img src="http://i.imgur.com/GmT37TG.png" />
    </div>
</div>

CSS

body {
background-color: #e5e5e5;

}

#main {
    padding: 10px;
    display: inline-block;
    width: auto;
    background-color: red;
}

#avatar {
    display: inherit;
}

.media {
    display: inherit;
}

.media img {
    margin-left: 10px;
}

Might have something to do with this: http://stackoverflow.com/a/2744005/2191572 but JoshC's answer looks spot-on! Normally a vertical align is used in the context of a `` so you need to have your `
` imitate a `` through the use of `display:table-cell;`. At least this is the easiest way =) — MonkeyZeus, Jan 10 '14 at 00:06

score 2 · Accepted Answer · answered Jan 10 '14 at 00:05

Change the parent, #main, to display:table-cell.

#main {
    padding: 10px;
    display: table-cell;
    width: auto;
    background-color: red;
}

Then add vertical-align:middle to .media (working example here)

.media {
    display: inherit;
    vertical-align: middle;
}

JerryHuang.me · Answer 2 · 2014-01-10T00:19:15.970

0

How to vertically align:

HTML

<div id="main">
    <div id="avatar" class="inner">
        <img src="http://i.imgur.com/GgxBXAA.png" />
    </div>
    <div class="media inner">
        <img src="http://i.imgur.com/GmT37TG.png" />
    </div>
</div>

CSS

body {
background-color: #e5e5e5;

}

#main {
    padding: 10px;
    display: inline-block;
    width: auto;
    background-color: red;

}

#avatar {
    display: inherit;
}

.media {
    display: inherit;
}

.media img {
    margin-left: 10px;
}

.inner{
    width: 100%;
    text-align: center;
}

Fiddle http://jsfiddle.net/6KJvj/

edited Jan 10 '14 at 00:19

answered Jan 10 '14 at 00:07

JerryHuang.me

1,790
1
11
21

It looks like you just copied everything from my example -.- – Josh Crozier Jan 10 '14 at 00:15
1

@JoshC My fault, I copied the wrong jsFiddle window :( Updated my code – JerryHuang.me Jan 10 '14 at 00:20

score 0 · Answer 3 · edited Jan 10 '14 at 18:46

0

You use display:block. Is this what you want?

http://jsfiddle.net/C8DKc/

body {
    background-color: #e5e5e5;
}

#main {
    padding: 10px;
    display: block;
    width: auto;
    background-color: red;
    width: 100px;
    margin: 0 auto;
}

#avatar {
    display: inherit;
}

.media {
    display: inherit;
}

.media img {
    margin-left: 10px;
}

edited Jan 10 '14 at 18:46

Josh Crozier

233,099
56
391
304

answered Jan 10 '14 at 00:12

guest

2,185
3
23
46

Easiest way to vertically align, horizontally aligned images?

3 Answers3

Linked