このテキストをボタンの横に中央に揃える方法は？

Question

jsFiddle

スクリーンショット

HTML

<div class="client-box"> 
    <div class="box-header clearfix"> 
    <h6 class="pull-left">General Information</h6> 
    <button class="btn btn-small pull-right"><i class="icon-pencil"></i> Edit</button> 
    </div> 
    <p>box content</p> 
</div> 

は、どのように私は、ヘッダー<h6>は、[編集]ボタンに対して垂直中心入手できますか？

box-headerにvertical-alignを置くことは動作しません。私はボタンのサイジングや後で何かを変更するかもしれないし、それが壊れるので、行の高さをハードコードしたくありません。

Answer 1

を求める人には満足しません。 1、表のセルと2、インライン要素：

HTML

<div class="box-header clearfix"> 
    <div class="left-cell"> 
     <h6>General Information</h6> 
    </div> 
    <div class="right-cell"> 
     <button class="btn btn-small"><i class="icon-pencil"></i> Edit</button> 
    </div> 
</div> 

CSS

.box-header { 
    border-bottom: 1px solid #aac7ef; 
    padding-bottom: 5px; 
    display: table; 
    width: 100%; 
} 
.left-cell { 
    display: table-cell; 
    vertical-align: middle; 
} 
.right-cell { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
} 

Demo

Answer 2

yeah..verticalアライメントは、CSSで問題となっています。だから私はあなたがボックスヘッダーのマージントップを設定することをお勧めします... マージントップのように：1px .. ボックスヘッダーwrtの余白のトップを調整すると問題を解決します。 FirefoxのFirebugで、余白を設定する必要があるピクセル数を確認することもできます。あなたはハードコードそれにしたくない場合は

Answer 3

、多分それを動的に設定してみてください。

$(function() { 
    $('h6.pull-left').css('line-height', $('button.btn.pull-right').outerHeight() + 'px'); 
}); 

私はあなたが左の要素と右を浮かぶので、垂直方向の配置が、その場合には動作しませんpull-rightとpull-leftを使用しているjsfiddle

Answer 4

を作成しました。あなたができるのは、パッドで遊ぶことです.要素のline-heightを24pxのように設定することをおすすめします。そして、そうvertical-align:middleはせいぜいまだらである、そしてあなたは、CSS display: tableとdisplay: table-cellとvertical-align: middleを使用することができますピクセル完璧

Answer 5

vertical-alignは、二つのオブジェクトの種類に適用されますs。

これは、HTML要素の他のタイプとは関係ありません。

それは「むら」や「問題は」それはそれはほとんどの人がそれをやりたいしないことだけだということではありません。

理想的には、あなたは完全にテキストを揃える垂直避けると思いますが、時には我々はする必要があります。それを行うにはさまざまな方法があり、どちらの方法を決めるのかは、通常あなたが取り組んでいる特定の状況に依存します。

このような状況では、1行のテキストに頼ることができれば、余分な上部のパディング、つまりposition-relativeで光学的に調整し、数ピクセル下に落とすことをお勧めします。