web-dev-qa-db-ja.com

Bootstrap 3列のコンテンツを垂直方向に揃えます

4年の休止期間後にWeb開発に戻った後、bootstrap 3列のコンテンツを次の列に垂直に配置します。このサイトも検索してみました一般的な一般的な検索と同様に、適切な解決策を思い付かなかった...または私の検索用語は貧弱です。

下のHTML/CSSでは、「ページタイトル」テキストを左の列の垂直方向の中央に配置したいと思います。 Bootstrap 3 CSSを使用している間は、HTMLとCSSをできるだけ簡潔にしたいので、単純な何かが完全に欠けていると思います。

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator">
    <div class="page-header-description"><small>Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>

CSS

 .page-header-box {
 background-color：＃3D3D3D; 
 border-bottom：5px solid＃b3b5b8; 
 margin-bottom：10px; 
} 
 .page-header-title {color：＃f79239; text-align：right; vertical-align：middle; margin：10px 0; } 
 .page-header-seperator {border-left：5px solid＃4e2f91; margin：10px 0; } 
 .page-header-description {color：＃febe10; } 
 .page-header-alt {margin-top：5px; color：＃0093b2; } 
 

ここにjsFiddleがあります... http://jsfiddle.net/E6LcY/8/

これは私がこれまでに投稿した数少ない例の1つなので、正しい方向に向けることができればすばらしいと思います。

csstwitter-bootstrap-3vertical-alignment
13
ACG

私はこの質問を削除することを検討しましたが、可能な解決策を探している他の誰か（私のような）にとって答えが役立つ可能性があると考えました。

私はBootstrap 3フレームワーク内にとどまりたいと思っていました...そして、「タイトル付き」を中央に配置するためにJavaScriptを追加することになりました。 Bootstrap 3は基本的に一部の機能にjQueryを必要とするため、問題はなかったと思いました。

今、もっと良い方法があると確信していますが、他の解決策は好きではありませんでした。私を正しい道に連れて行こうとしたすべての人に感謝します。

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title" id="header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator" id="header-seperator">
    <div class="page-header-description"><small>Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>
</div>

CSS

.page-header-box {
background-color:#3D3D3D;
border-bottom:5px solid #b3b5b8;
margin-bottom:10px;
}
.page-header-title { color:#f79239;text-align:right;margin-bottom:10px; vertical-align: middle; }
.page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
.page-header-description { color:#febe10; }
.page-header-alt { margin-top:5px;color:#0093b2; }

JS（jQueryを使用）

var sep_height = '';
$(window).on("load resize", function(e) {
var seperatorHeight = $('#header-seperator').height();
if (seperatorHeight != sep_height) {
    sep_height = seperatorHeight;
    var titleHeight = $('#header-title').height();
    var difference = ((seperatorHeight - titleHeight) / 2) + 5;
    $('#header-title').css('margin-top', difference + 'px');
}
});

注：「sep_height」は、不要な計算を行わず、必要に応じてタイトルの高さのみを変更するためのものです。説明テキストのマージンを補うために、上部のマージンに5pxを追加しています。

以下は最新のフィドルです（onLoadイベントの修正を含む）。 http://jsfiddle.net/E6LcY/15/

助けてくれたすべての人に再び感謝します。

9
ACG

これは私がやる方法です、あなたはこれを試すことができます：

.Parentdiv{
position:relative;
width:100%;
height:100%;
}

.Parentdiv .childdiv{
position: absolute;
top:0;
bottom:0;
margin:auto;
}
0
Mirage

ルールを追加：line-height: 45px;をcol-md-2クラスに

PDATED FIDDLE

0
Danield

私はbootstrap）に飽き始めています。特定の機能を実行するために必要なハッキングの量は、それを使用することで得られると想定される利点に見合う価値がない場合があります。

この場合、bootstrapを破棄して、親に適用されているプロパティとフレックスボックスの組み合わせを使用することで、必要な機能のアーカイブを終了しました。

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

子供へのそれら：

.parent > div {
  display: inline-block;
  vertical-align: middle;
}

そしてこのメ​​ディアクエリ：

@media all and (max-width: 500px) {
  .parent {
    /* for small screens, we use column direction rather than row */
    flex-direction: column !important;
  }
}

関連するHTMLは次のとおりです。

<div class="parent">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

たとえば、これをレスポンシブフッターに使用しました。一定の幅とマージン（それぞれ同じ）を組み合わせて再生すると、画面の幅に応じて、行ごとに異なる数量で他の行の上にうまく配置されます。 。

私の意見では、応答性とレイアウトのサポートが向上し、JavaScriptの使用を回避し、オーバーヘッドとブートストラップの煩わしさなしに、コードがはるかに明確、簡単、クリーンで少なくなりました。

0
Pere