31

div私はtwitterブートストラップを使用しており、ブロックを垂直方向に画像と右側のテキストに揃えたいと考えていました。

コードは次のとおりです。

<ol class="row" id="possibilities">
     <li class="span6">
         <div class="row">
             <div class="span3">
                 <p>some text here</p>
                 <p>Text Here too</p>
             </div>
             <figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
         </div>
     </li>
     <li class="span6">
         <div class="row">
             <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
             <div class="span3">
                 <p>Some text</p>
                 <p>Some text here too.</p>
             </div>
         </div>
     </li>
</ol>

私はこれを試しましたが、wortksではありません：

.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}

私もこれを試しました：

.span6 .row .span3{display: inline-block; vertical-align: middle;}

何も機能していません。誰かがアイデアを持っていますか？前もって感謝します。

4

5 に答える 5

17

これを試して：

.row > .span3 {
    display: inline-block !important;
    vertical-align: middle !important;
}

編集：

フィドル： http： //jsfiddle.net/EexYE/

float: none !important;span3がフローティングで干渉する場合も、Diegoを追加する必要があります。

編集：

フィドル： http： //jsfiddle.net/D8McR/

アルベルトへの応答：行divの高さを固定する場合、垂直方向の中央揃えを続行するには、行の行の高さを行のピクセルの高さと同じに設定する必要があります（つまり、両方あなたの場合は300pxまで）。これを行うと、子要素が行の高さを継承することに気付くでしょう。これはこの場合の問題です。そのため、span3sの行の高さを実際の値に設定する必要があります（1.5はフィドルの値の例、またはフォントサイズの1.5倍。行の高さを変更したときに変更しませんでした）。

于 2013-06-16T00:13:08.670 に答える
4

floatspan6から属性を削除してみてください。

{ float:none !important; }
于 2013-06-11T16:31:47.660 に答える
0

私自身のブートストラップの使用を正しく覚えていれば、.spanNクラスはフロートされ、自動的にとして動作しdisplay: blockます。作業するdisplay: table-cellには、フロートを取り外す必要があります。

于 2013-06-10T23:10:43.117 に答える
0

前の回答と同様に、いつでもプル属性を使用できます。

    <ol class="row" id="possibilities">
       <li class="span6">
         <div class="row">
           <div class="span3">
             <p>some text here</p>
             <p>Text Here too</p>
           </div>
         <figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
        </div>
 </li>
 <li class="span6">
     <div class="row">
         <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
         <div class="span3">
             <p>Some text</p>
             <p>Some text here too.</p>
         </div>
     </div>
 </li>

于 2013-06-11T21:07:34.850 に答える
0

私はこれを使います

<style>
html, body{height:100%;margin:0;padding:0 0} 
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}   
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto} 
</style>
<body>
<div class="container-fluid">
     <div class="row-fluid">
     <div class="offset3 span6 centering">
            content here
         </div>
    </div>
 </div>
</body>
于 2013-06-19T21:11:03.083 に答える