CODEWITHSUNDEEP
htmlcssvertical-alignment
ben
ben

Reputation: 29777

How can I vertically align these 2 divs?

In this jsFiddle, how can I vertically align the image and the text?

HTML:

<div class="step_div">
    <div class="step_div_inner">
        <div class="step_div_inner_image">
            <img src="http://i.imgur.com/TasZn.png">
        </div>
        <div class="step_div_inner_text">
            here is some text here is some text here is some text here is some text here is some text here is some text 
        </div>
    </div>
</div>​

CSS

.step_div_inner_text {
    font-size:18px;
    width:460px;
    line-height:24px;
    position:relative;
    left:5px;
    bottom:14px;
    display:inline-block;
}
.step_div_inner_image {
    display:inline-block;
}
.step_div {
    padding:20px 0;
}
.step_div_inner {
    width:574px;
    margin:0 auto;
}​

Upvotes: 1

Views: 690

Answers (3)

Sauer
Sauer

Reputation: 1469

Here is my best shot...

.step_div_inner_text {
    font-size:18px;
    width:460px;
    line-height:18px;
    left:5px;
    vertical-align:top;
    bottom:14px;
    display:inline-block;
}
.step_div_inner_image {
    display:inline-block;
}
.step_div {
}
.step_div_inner {
    width:574px;
    margin:0 auto;
}

And you can still push around the picture with a few pixel above the image... Depends on the Text and font you are using. There is no definitve answer to your question. But the problem in your particular case, was, that the line height was bigger than the font size.

If you want to stick with your line height, then you'll need to add a top-padding to your image-div until it fits your text... Trial and error :)

Upvotes: 0

Alex W
Alex W

Reputation: 38193

http://jsfiddle.net/xH2da/11/

CSS:

.step_div_inner_text {
    font-size:18px;
    width:460px;
    position:relative;
    display:inline-block;
    vertical-align: top;
}
.step_div_inner_image {
    display:inline-block;
    vertical-align: middle;
    line-height: 2em;
}
.step_div {
    padding:20px 0;
}
.step_div_inner {
    width:574px;
    margin: auto;
}

http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

Upvotes: 0

MrDCGN
MrDCGN

Reputation: 113

You could use floats like this:

http://jsfiddle.net/xH2da/10/

You'll just have to make sure to clear them if needed.

Upvotes: 1

Related Questions