如何在按鈕旁邊對齊此文本？

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>垂直居中？

將vertical-align放在box-header上不起作用。 我不想對行高進行硬編碼，因為我可能會更改按鈕大小或稍后的某些內容，然后它會中斷。

Answer 1

您可以使用css display: table和display: table-cell和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;
}

演示

Answer 2

vertical-align僅適用於兩種類型的對象：1，表格單元格和2，內聯元素。

它與任何其他類型的HTML元素無關。

並不是說它“不穩定”或“問題”只是因為它沒有做到大多數人希望它做的事情。

理想情況下，您可以完全避免垂直對齊文本，但有時我們需要。 有多種方法可以做到這一點，至於決定采用哪種方式，通常取決於您正在處理的特定情況。

在這種情況下，如果你可以依賴它是一行文本，我認為你最好的選擇就是用一些額外的頂部填充或position-relative光學調整，然后將其降低幾個像素。

Answer 3

如果您不想硬編碼，可以嘗試動態設置它。

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

我創造了一個jsfiddle

Answer 4

你正在使用pull-right和pull-left pull-right的元素，因此在這種情況下垂直對齊將不起作用。 你可以做的最好是使用填充，或者像其他人建議你的h6元素上設置的line-height為24px。 並且是vertical-align:middle充其量是不穩定的，並且永遠不會滿足那些尋求像素完美的人

Answer 5

是的..垂直對齊在css中一直是個問題。 所以我建議你設置盒頭的邊緣頂部...像margin-top：1px ..調整盒頭wrt邊緣頂部將解決問題。 您還可以使用Firefox中的Firebug查看您需要設置margin-top的像素數。