1

Bootstrap を使用して、2 つのスパン (スパン 4 とスパン 8) 内のテキストと画像を、同じスパン (スパン 8) 内の 1 つの画像とテキストで垂直方向に揃えようとしています。画像は現在左に浮いています。ブラウザウィンドウの幅に応じて画像が非表示/再表示されるため、テキストは非表示の画像のスペースを占有します。その部分は機能します。

しかし、テキストを画像に垂直に配置することはできず、見つけることができるすべての「解決策」について調べて試しましたが、うまくいきませんでした。テキスト全体の高さが画像の高さよりも低くなっています。

コード...

<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 ピクセルの高さに合わせて垂直方向に配置されていません。

テーブルレイアウトも試してみましたが、うまくいきませんでした。どんな助け/指示も大歓迎です。

4

1 に答える 1

0

数十行ある場合、各行が外側になるように、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 のフリッグ - 行数に従って各行を選択するだけです。たとえば、テキストを 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-これを自分で解決する必要があったため、質問をありがとう。先に進む方が簡単だと判断しました。もちろん、より良い答えがあれば大歓迎です...

于 2013-04-24T15:42:31.970 に答える