ブートストラップ3列の内容を垂直に整列する

Question

4年後にWeb開発に戻った後、ブートストラップ3列の内容を次の列に垂直に合わせるのに苦労しています。私は一般的な検索だけでなく、このサイトを検索しようとしましたが、正しい解決策が出てこなかった...または検索条件が悪いです。

以下のHTML/CSSでは、左の列に「ページタイトル」のテキストを垂直に配置したいと思います。私はブートストラップ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/

これは非常に私を指して、私が今まで投稿した数回の一つであります正しい方向へと大きくなるでしょう。

Answer 1

が、私はこれを削除すると考えられ可能な解決策を探している他の人（私のような人）にとって、その答えが役に立つと思っていました。

私はBootstrap 3のフレームワークにとどまりたいと思っていましたが、「タイトル付き」を中心にするJavaScriptを追加しました。私はブートストラップ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（jQueryのを使用して）

.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

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を追加しています。 http://jsfiddle.net/E6LcY/15/

おかげで再び助けたすべての人々に：ここで

は（onLoadイベントの修正を含む）最新のフィドルです。

Answer 2

ルールを追加します：line-height: 45px;をCOL-MD-2クラス

UPDATED FIDDLE

Answer 3

これは私が行う方法ですし、あなたはこれを試すことができます。

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

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

Answer 4

何らかの理由でブートストラップに飽きてきました。場合によっては、特定の機能を達成するために必要なハッキングの量が、あなたがそれを使用することで得られる利点の価値があるわけではありません。この場合

は、私は、ブートストラップを放棄し、これらのプロパティを持つflexboxesの組み合わせを使用することにより、必要な機能をアーカイブ終了し、親に適用：

.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の使用が避けられ、ブートストラップのすべてのオーバーヘッドと手間がかかりません。