如何中間對齊按鈕旁邊的文本？

截圖

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不起作用。我不想對行高進行硬編碼，因爲我可能會稍後更改按鈕大小或其他內容，然後它會中斷。

來源

2013-01-16 mpen

你知道，這已經是很長一段時間了。我有很多經驗，但至今我知道沒有可靠的垂直排列解決方案。最好的建議是調整行高，直到它符合你的需求... ps，是的，我知道你說過你不想設置行高。我只是說這就是我必須經常做的事 –

在'em'中給'padding'或'margin'這樣的'padding：0.5em 0;'。 –

至於我看到，你的''

是'浮動：left'，而你的''

你可以使用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; 
}

Demo

來源

2013-01-16 04:31:24 3dgoo

需要'的text-align：右'在'.right-cell'上，以保持按鈕右對齊，但否則這似乎是完美的。 – mpen

耶..垂直對齊一直是一個問題在CSS中。所以我建議你設置頁眉的頁邊距... like margin-top：1px .. 調整框標題和頁邊距將解決問題。你也可以用Firefox中的Firebug檢查一下你需要多少像素來設置margin-top。

來源

2013-01-16 04:00:40

如果你不想硬編碼它，也許嘗試動態設置它。

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

我創建你正在使用pull-right和pull-left一個jsfiddle

來源

2013-01-16 04:01:12 twksos

漂浮的元素左，右等垂直對齊不會在這種情況下工作。最好你可以做的是玩填充，或者像其他人建議在你的h6元素上設置line-height到類似24px的東西。是的vertical-align:middle充其量是最好的，永遠不會滿足那些尋求像素完美的人

來源

2013-01-16 04:04:27 keeg

vertical-align僅適用於2型的對象：1，表單元格和2，內聯元件秒。

它對任何其他類型的HTML元素沒有影響。

這並不是說它是'多斑點'或'一個問題'，它只是它不會做大多數人希望它做的事情。

理想情況下，你會避免垂直對齊文本，但有時我們需要。有很多方法可以做到這一點，並且決定採用哪種方式來完成它，通常取決於您所處的特定情況。

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

來源

2013-01-16 04:32:44

如何中間對齊按鈕旁邊的文本？

回答

相關問題