使用引导程序垂直对齐文本/图像 [英] vertical align text/image with bootstrap

问题描述

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

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

代码...

<div class="row"><div class="span4">第1行<br/>第2行</div><div class="span8"><img src="http://lorempixel.com/90/90/abstract/" alt=""/>这是一行文字.<br/>这是另一行文字.<br/>这是第三行文本.</div>

.outer img {display:block;}.outer .row {padding:4px;背景颜色:#CC9966}.span4 {背景色:#555;宽度:100px；文本对齐:右}.span8 {背景色:#777;宽度:400px}.row img {浮动:左；填充右:5px;宽度:90px；高度:90px;}/* 来自引导程序的样式 */.row {margin-left: 0px;*缩放:1;}.row:before,.row:after {display: table;内容: "";行高:0;}.row:after {clear: both;}[class*="span"] {float: left;最小高度:1px；左边距:12px;}

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

我的项目中有 24 行，因此这种垂直对齐将重复多次.

我最接近的是使用 http://phrogz.net/css/vertical-align/index.html 但图像右侧的文本仍然与图像顶部对齐，而不是与 90 垂直对齐图片的像素高度.

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

解决方案

对您的 HTML 稍作更改，就好像您有几十行一样，那么每一行都将是外部的(假设您希望将文本放在每一行上.

<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">这是一行文字.<br/>这是另一行文字.<br/>这是第三行文本.</div>

CSS 上的一个 frig - 只需根据行数选择每一行，例如将 2 行文本居中使用类inner2，对于3 行使用类inner3.这将为您节省一些将其全部居中的痛苦.

/* .inner 工作但相对定位在有 3 行文本的地方使用 .inner3 和.inner2 有 2 条线，并调整以适应如果布局是响应式的，您将需要@media 查询...*/.inner3 {位置:相对；顶部:12px；}.inner2 {位置:相对；顶部:20px；}/* 主要是你的东西... */.外{边框:2px 纯红色}.outer img {显示:块；}.outer .row {填充:4px；背景颜色:#CC9966}.span4 {背景色:#555；宽度:100px；文本对齐:右}.span8 {背景色:#777;宽度:400px}.row img {向左飘浮;填充右:5px;宽度:90px；高度:90px；}/* 来自引导程序的样式 */.排 {左边距:0px；*缩放:1；}.row:before, .row:after {显示:表；内容:"";行高:0；}.行:后{清楚:两者；}[class*="span"] {向左飘浮;最小高度:1px；左边距:12px；}

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

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.

解决方案

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

这篇关于使用引导程序垂直对齐文本/图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！