6

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>[編集]ボタンに対してヘッダーを垂直方向の中央に配置するにはどうすればよいですか？

vertical-align装着してもうまくいきbox-headerません。ボタンのサイズなどを後で変更すると壊れてしまう可能性があるため、行の高さをハードコーディングしたくありません。

4

5 に答える 5

8

cssdisplay: tableとdisplay: table-cellandを使用できますvertical-align: middle。

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;
}

デモ

于 2013-01-16T04:31:24.847 に答える
3

vertical-align1、テーブルセル、2、インライン要素の2種類のオブジェクトにのみ適用されます。

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

それが「むら」や「問題」であるということではなく、ほとんどの人が望んでいることをしていないということです。

理想的には、テキストを完全に垂直方向に整列させることは避けますが、必要になる場合もあります。それを行うにはさまざまな方法があり、どちらの方法を決定するかについては、通常、作業している特定の状況によって異なります。

position-relativeこの状況で、1行のテキストであると信頼できる場合は、追加の上部パディングを使用して光学的に調整するか、数ピクセル下にドロップするのが最善の策だと思います。

于 2013-01-16T04:32:44.067 に答える
2

ハードコーディングしたくない場合は、動的に設定してみてください。

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

jsfiddleを作成しました

于 2013-01-16T04:01:12.617 に答える
1

使用pull-rightしpull-leftている要素を左右にフロートさせるため、この場合、垂直方向の配置は機能しません。あなたができる最善のことは、パディングで遊ぶか、他の人が提案したように、要素を24pxのように設定line-heightするh6ことです。そして、はいvertical-align:middle、せいぜいむらがあり、ピクセルの完璧さを求める人には決して満足しません

于 2013-01-16T04:04:27.383 に答える
0

ええ..垂直方向の配置はcssで問題になっています。だから私があなたに提案するのは、ボックスヘッダーのマージントップを設定することです...マージントップ：1pxのように..マージントップでボックスヘッダーを調整すると問題が解決します。また、FirefoxのFirebugで、マージントップを設定するために必要なピクセル数を確認できます。

于 2013-01-16T04:00:40.307 に答える