vertical align text/image with bootstrap

Question

Using Bootstrap, I am attempting to vertically align text and an image in two spans (span 4 and span8) with one image and text within the same span (span8). The image is currently floated left. The image will hide/unhide depending upon the width of the browser window so the text will take up the space of the hidden image. That part works.

But vertically aligning the text with the image does not and I have looked at, and tried, about every 'solution' I can find but none work for me. The total height of the text is less than the height of the image.

code...

<div class="outer">
<div class="row">
<div class="span4">Line 1<br/>Line 2</div>
<div class="span8"><img src="http://lorempixel.com/90/90/abstract/" alt="" />This is a line of text. <br /> This is another line of text.<br /> This is a third line of text.</div>
</div>
</div>

.outer img {display:block;}
.outer .row {padding:4px; background-color:#CC9966}
.span4 {background-color:#555; width:100px; text-align:right}
.span8 {background-color:#777; width:400px}
.row img {float:left; padding-right:5px; width:90px; height:90px;}

/* styles from bootstrap */
.row {margin-left: 0px; *zoom: 1;}
.row:before,.row:after {display: table; content: ""; line-height: 0;}
.row:after {clear: both;}
[class*="span"] {float: left; min-height:1px; margin-left:12px;}

See http://jsfiddle.net/profweather/sN9rU/

There are twenty four rows in my project so this vertical alignment will be repeated many times.

The closest I've come is using the outer div/inner div of relative and absolute positioning seen at http://phrogz.net/css/vertical-align/index.html but the text to the right of the image remains aligned to the top of the image, not vertically aligned to the to the 90 pixel height of the image.

I even experimented with a table layout but to no avail. Any help/direction is greatly appreciated.

Answer 1

A slight change to your HTML, as if you have dozens of rows then each row would be an outer (assuming you want to center text on each row.

<div class="row outer">
    <div class="span4 inner2">Line 1<br/>Line 2</div>
    <div class="span8">
        <img src="http://lorempixel.com/90/90/abstract/" alt="" />
        <div class="inner3">This is a line of text.
            <br />This is another line of text.
            <br />This is a third line of text.</div>
    </div> 
</div>

And a frig on the CSS - just select each row as per the number of lines e.g. to center text with 2 lines use class inner2 and for 3 lines use class inner3. This will save you SOME of the pain of centering it all.

/* .inner working but positioned relative
    use .inner3 where you have 3 lines of text and
    .inner2 where you have 2 lines, and adjust to suit 

     You will need @media queries if the layout is to be responsive...
*/

.inner3 {
    position:relative;
    top:12px;
}
.inner2 {
    position:relative;
    top:20px;
}

/* Mostly your stuff... */
.outer {
    border:2px solid red
}
.outer img {
    display:block;
}
.outer .row {
    padding:4px;
    background-color:#CC9966
}
.span4 {
    background-color:#555;
    width:100px;
    text-align:right
}
.span8 {
    background-color:#777;
    width:400px
}
.row img {
    float:left;
    padding-right:5px;
    width:90px;
    height:90px;
}

/* styles from bootstrap */
 .row {
    margin-left: 0px;
    *zoom: 1;
}
.row:before, .row:after {
    display: table;
    content:"";
    line-height: 0;
}
.row:after {
    clear: both;
}
[class*="span"] {
    float: left;
    min-height:1px;
    margin-left:12px;
}

ps - thanks for the question as I needed to solve this myself, and decided it was easier to just go ahead. of course, any better answers much appreciated...