CODEWITHSUNDEEP
htmlcss
chendriksen
chendriksen

Reputation: 1024

Vertically aligned image and text div

UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?

I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.

The image should be 15% of the width of the container div, with the text using the remaining 85%

The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.

I've tried to work this out but can't seem to do it! Can anyone help?

#picture {
    float: left;
    width: 15%;
    line-height: auto;
}

#text {
    width: auto;
    padding-left: 16%;
    line-height: auto;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
}

#text p {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

and

 <div id="quotes">
    <div id="picture">
        <img style="width: 100%; vertical-align: middle" src="tom.jpg" >
    </div>
    <div id="text">
        <p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
    </div>
</div>

Upvotes: 0

Views: 1507

Answers (7)

Flam
Flam

Reputation: 106

<div id="quotes">
    <div id="picture">
        <img src="tom.jpg" />
    </div>
    <div id="text">
        <p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
    </div>
</div>

Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.

#quotes {
    display:table;
}
#picture {
    width: 15%;
    display:table-cell;
    vertical-align: middle;
}
#text {
    display:table-cell;
    width:85%;
    padding-left: 16%;
}
#picture img {
    width: 100%;
}

http://jsfiddle.net/X3WsV/1/

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.

Vertical-align works:

  1. in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)

  2. inside td or it's CSS default display : display:table-cell;

    here jsfiddle @TXChetG updated

  3. Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
  4. Using display:table/* table-cell*/; http://jsfiddle.net/GCyrillus/hQ6Vw/3/

Upvotes: 1

Ross Smith
Ross Smith

Reputation: 3

Why not just set the #text p display to display: inline or display:block; or use margins to align them?

Upvotes: 0

TXChetG
TXChetG

Reputation: 342

Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/

The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.

Upvotes: 1

Seth McClaine
Seth McClaine

Reputation: 10040

Is this what you mean?

html

<div class="container">
  <div class="images">
    <img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
  </div>
  <div class="text">
    Example
  </div>
</div>   
<div class="container">
  <div class="images">
    <img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
  </div>
  <div class="text">
    Example
  </div>
</div>

css

.container {
  clear: both;
}
.images {
  width: 15%;
  float: left;
  vertical-align: text-top;
}
.text {
  width: 85%;
  float: right;
  vertical-align:text-top;
}

Upvotes: 0

dezman
dezman

Reputation: 19358

Check this out

HTML:

<section>
    <div id="one"></div>
    <div id="two"></div>
</section>

CSS:

section {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 10px;
}
div#one {
    width: 15%;
    height: 200px;
    background: red;
    float: left;
}
div#two {
    margin-left: 15%;
    height: 200px;
    background: black;
}

Upvotes: 0

Jay
Jay

Reputation: 6294

This should get you close:

<div>
    <div style="background: grey; width: 15%; float:left"></div>
    <div style="background: blue; width: 85%; float:left"></div>
</div>

Replace the grey background div with your image and the blue with your text.

Upvotes: 0

Related Questions