web-dev-qa-db-ja.com

Bootstrapレスポンシブグリッドで中央を垂直に整列

Bootstrap 2.3.2を使用して、垂直中央のspanに非常に単純な問題があります。

要件：

  1. 列は2つあり、左の列は300x300の画像があるため、高さは300pxに固定されています。

  2. 右の列にはテキストがあり、左の列に基づいて中央に配置する必要があります。

  3. すべてがレスポンシブでなければなりません。それが私がレスポンシブ画像を使用している理由です。

  4. 2番目の列が下に下がる場合、その高さはテキストのサイズに適合しなければなりません。つまり、2列目に固定の高さを設定することはできません。

  5. これを解決するためにJSを使用しないでください。

[〜＃〜] html [〜＃〜]：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
        <img class="img-responsive" src="http://placehold.it/300x300"/>
    </div>
    <div class="span6 v-center">
        <div class="content">
            <h1>Title</h1>
            <p>Paragraph</p>
        </div>
    </div>
  </div>
</div>

[〜＃〜] css [〜＃〜]：

.v-center {
    display:table;
    border:2px solid gray;
    height:300px;
}

.content {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

私のコード：http://jsfiddle.net/qhoc/F9ewn/1/

上記の内容を見ることができます。基本的に、2番目の列spanをテーブルとして、middleを.contentテーブルセル。私はここでそのメソッドをコピーしました ブートストラップで垂直アラインを使用する方法 （ここでの実例を使用して http://jsfiddle.net/lharby/AJAhR/ ）

上記の要件により、私の挑戦は少し異なります。それを機能させる方法についてのアイデアはありますか？ありがとう。

htmlcsstwitter-bootstrapstylesheet
11
HP.

!importantルールをdisplay: tableクラスの.v-centerに追加します。

.v-center {
    display:table !important;
    border:2px solid gray;
    height:300px;
}

表示プロパティは、bootstrap to display: block]によってオーバーライドされています。

例

12
Morpheus
.row {
    letter-spacing: -.31em;
    Word-spacing: -.43em;
}
.col-md-4 {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

注：.col-md-4は任意のグリッド列にすることができますが、これは単なる例です。

0
arithran