使用引导程序垂直对齐文本/图像答案

【问题标题】：vertical align text/image with bootstrap使用引导程序垂直对齐文本/图像
【发布时间】：2013-01-14 21:05:32
【问题描述】：

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

但是将文本与图像垂直对齐并没有，我已经查看并尝试了我能找到的所有“解决方案”，但没有一个对我有用。文字总高度小于图片高度。

代码...

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

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

我的项目中有 24 行，所以这种垂直对齐会重复很多次。

我最接近的是使用在http://phrogz.net/css/vertical-align/index.html 看到的相对和绝对定位的外部 div/内部 div，但图像右侧的文本仍然与图像顶部对齐，而不是垂直对齐到到图像的 90 像素高度。

我什至尝试了表格布局，但无济于事。非常感谢任何帮助/指导。

【问题讨论】：

标签： twitter-bootstrap vertical-alignment

【解决方案1】：

对您的 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>

还有一个 CSS 上的 frig - 只需根据行数选择每一行，例如以 2 行居中文本使用类 inner2 和 3 行使用类 inner3。这将为您省去一些集中注意力的痛苦。

/* .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 - 感谢您提出的问题，因为我需要自己解决这个问题，并决定继续进行比较容易。当然，任何更好的答案都非常感谢......

【讨论】：