14

編集：これらのスパンの高さが不明であることを明確にしたかっただけです（応答性のため）！

Bootstrap<div class="span6">内で2 つの を垂直方向に整列させようとしていますが、 orなどの通常のトリックを使用しても問題が発生します(これは、私が取り組んでいた JSFiddle です: http://jsfiddle.net/mA6Za/ ) 。 .<div class="row">display: inline-block;display: table-cell;

Bootstrapでは機能しない、私が使用しようとしていたものは次のとおりです。

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;">
            Block 1 - Vertically center me please!
        </div>
        <div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;">
            Block 2- Center me too
        </div>
    </div>
</diV>

.span6と の両方の高さが不明になるように、これら 2 つのBlock1をBlock2垂直方向に並べることは可能ですか? 責任ある機能のために Bootstrap を使用したいのですが、tablet+ の場合はコンテンツを垂直方向に配置したいと考えています。

4

6 に答える 6

20

のコンテンツをdiv垂直方向の中央に配置するか、実際divの 自体を配置するかを明確にしているとは思いません。とにかく、両方のオプションに対する解決策があります。

div実際のを垂直方向に中央揃え

最初に、を垂直方向に揃えるソリューションdiv:jsFiddle

display: table;on.containerとdisplay: table-cell;onを設定することで機能します.row。それが完了したら、そのコンテンツを垂直方向に中央揃えに設定できvertical-align: middle;ます.row。

.rowまた、手動で の幅をに強制する必要がありました。これは960pxあまり応答性が高くありません (メディア クエリを使用して修正できます) 。これらのエクストラを強制的に追加しないと、両方が同じ行に収まらなくなるため、2 番目の結果が最初の値よりも低くなります。デモンストレーションのために、すべての要素にいくつかの を設定しました。margin-left-20px.rowdisplay: table-cell;.row20pxdivheight: 100%;

CSS

.container {
    margin-top: 10px;
    display: table;
    height: 100%;
}
.row {
    min-width: 960px;
    display: table-cell;
    height: 100%;
    vertical-align:middle;
}

divのコンテンツを垂直方向に中央揃え

のコンテンツを垂直方向に中央揃えにしたい場合は、onとonを設定divすることで実行できます。に設定してonを取り除く必要もあります。display: table;.rowdisplay: table-cell;.span6float: left;.span6float: none

このオプションを示すフィドルは次のとおりです。jsFiddle

于 2013-05-29T00:53:45.593 に答える
1

固定の高さと単一の線のみを使用line-heightしているため、これに簡単に使用できます。

.span6:first-child{
    line-height:300px;
}

.span6{
    line-height:170px;
}

フィドルを参照してください：http://jsfiddle.net/mA6Za/1/

于 2013-05-22T02:39:13.817 に答える
1

これをやってみてくださいhttp://jsfiddle.net/mA6Za/2/

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; position: absolute; top: 50%; margin-top: -150px; ">
            Block 1 - Vertically center me please!
        </div>
        <div class="span6 offset6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle; top: 50%; margin-top: -85px ;  position: absolute " >Block 2- Center me too
        </div>
    </div>
</div>
于 2013-05-22T02:39:59.900 に答える