Twitter bootstrap 使用引导垂直对齐文本/图像

使用引导，我试图在两个跨度（跨度4和跨度8）中垂直对齐文本和图像，并在同一跨度（跨度8）中对齐一个图像和文本。图像当前向左浮动。图像将根据浏览器窗口的宽度隐藏/取消隐藏，因此文本将占据隐藏图像的空间。那部分有效

但是，将文本与图像垂直对齐并不可行，我已经研究并尝试了我能找到的每一个“解决方案”，但没有一个适合我。文本的总高度小于图像的高度

代码

<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;}

第1行
第2行
这是一行文字
这是另一行文本。
这是第三行文本。
.outer img{display:block；}
.outer.row{padding:4px；背景色：#CC9966}
.span4{背景色：#555；宽度：100px；文本对齐：右}
.span8{背景色：#777；宽度：400px}
.row img{float:左；padding right:5px；宽度：90px；高度：90px；}
/*来自引导的样式*/
.行{左边距：0px；*缩放：1；}
.row:before、.row:after{display:table；内容：“”；行高：0；}
.row:在{clear:both；}之后
[class*=“span”]{浮点：左；最小高度：1px；左边距：12px；}

看

在我的项目中有24行，所以这个垂直对齐将重复很多次

最接近的是使用相对和绝对位置的外部div/内部div，但图像右侧的文本仍与图像顶部对齐，而不是与图像的90像素高度垂直对齐

---

我甚至尝试了一个表格布局，但没有用。非常感谢您提供的任何帮助/指导。

对HTML稍作更改，就好像您有几十行，那么每行都是外部的（假设您希望将文本置于每行的中心）

<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>

ps-谢谢你的问题，因为我需要自己解决这个问题，并且决定更容易继续。当然，任何更好的答案都非常感谢

/* .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;
}