Question

使用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/

我的项目中有二十四行，因此这种垂直对齐将重复多次。

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

我甚至尝试过表格布局，但无济于事。非常感谢任何帮助/方向。

Answer 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行为中心文本使用class inner2，对3行使用class 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 - 感谢我自己需要解决的问题，并决定继续前进更容易。当然，任何更好的答案都非常赞赏...

垂直对齐文本/图像与引导程序

1 个答案: