Div Vertical Alignment with Images

Question

I know this has been asked many, many times before, but I still am not able to accomplish what I want on my own. I have looked at various websites for help such as Here and Here as well as using display-table with vertical align, line height etc.

Here is what I am trying to accomplish ( I know I will probably have to add more divs ). The text isn't always constant, so I can't just set the padding and be done with it as the text in red and blue may change in length.

Image of my divs

Here is a simple jsFiddle for what I currently have: http://jsfiddle.net/gP2U8/9/

<div class="container">
    <div class="left">
        <img src="http://www.gadgets-for-men.co.uk/wp-content/themes/revolution_tech-20/images/rss-icon-50.gif" />
        <span>This is text below the image</span>
    </div>
    <div class="right">
        <span>This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text.</span>
    </div>
</div>


.container{
    border: 1px solid black;
    width: 400px;
    height: auto;
    position: relative;
    display: inline-block;
}

.left{
    float:left;
    width: 25%;
}

.right{
     float: right;
    width: 75%;
}

.left, .right{
     margin-top: 25px;
    margin-bottom: 25px;
}

score 2 · Accepted Answer · answered Mar 17 '13 at 19:08

2

You were so close! Just set the image to display: block

http://jsfiddle.net/d4DaV/1/

answered Mar 17 '13 at 19:08

MattDiamant

8,561
4
37
46

Not quite, if you add more text you will see a problem. http://jsfiddle.net/d4DaV/2/ I want the image and text below to stay vertically aligned as well – sl133 Mar 17 '13 at 19:10
aligned where? In the middle? At the bottom? It's currently aligned at the top. – MattDiamant Mar 17 '13 at 19:12
Vertically aligned in the middle, so that it is centered. You can see in my mock up image, the left side will stay in the middle of the text of the right. – sl133 Mar 17 '13 at 19:12
This still is based on a fixed percentage. It might suffice for you, but it isn't centered. – NGLN Mar 17 '13 at 20:19

score 2 · Answer 2 · answered Mar 17 '13 at 19:21

2

you can use display: table and display: table-cell for vertical alignment.

See http://jsfiddle.net/d4DaV/3/

doesn't work on IE6 and IE7 but from IE8 upward

answered Mar 17 '13 at 19:21

Stephan

1,246
8
16

score 0 · Answer 3 · answered Mar 17 '13 at 20:29

Don't use floating elements. Instead, use inline elements (on which you can use the vertical-align style), glued together with white-space: nowrap and font-size: 0, as shown in this demo fiddle.

Markup (unchanged):

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

Style sheet:

.container{
    border: 1px solid black;
    width: 400px;
    padding: 25px 0;
    white-space: nowrap;
    font-size: 0;
}
.left, .right {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    font-size: 12pt;
}
.left{
    width: 25%;
}
.right{
    width: 75%;
}
img {
    display: block;
}

Div Vertical Alignment with Images

3 Answers3