Come allineare al centro questo testo accanto a un pulsante?

Question

jsFiddle

screenshot

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> 

Come posso ottenere l'intestazione <h6> verticalmente centrato rispetto al pulsante Edit?

Inserire vertical-align su box-header non funziona. Non voglio hardcodificare un'altezza di linea perché potrei cambiare il dimensionamento dei pulsanti o qualcosa in seguito e poi si romperà.

Answer 1

Si potrebbe usare CSS e display: tabledisplay: table-cell e 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

Answer 2

sì..allineamento verticale è stato un problema in css. Quindi quello che ti suggerisco è di impostare il margine superiore del box-header ... come margin-top: 1px .. regolando l'intestazione della casella wrt margin in alto risolverà il problema. Inoltre puoi controllare con Firebug in Firefox che quanti pixel hai bisogno di impostare il margine superiore.

Answer 3

se non si desidera eseguire il codice, provare a impostarlo in modo dinamico.

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

ho creato un jsfiddle

Answer 4

si utilizza pull-right e pull-left che galleggia gli elementi a sinistra e l'allineamento a destra e in modo verticale non funziona in questo caso. La cosa migliore che puoi fare è giocare con il padding, o come altri hanno suggerito di impostare line-height sull'elemento h6 su qualcosa come 24px. E sì vertical-align:middle è migliore delle ipotesi, e mai soddisfacente per coloro che cercano la perfezione pixel

Answer 5

vertical-align applica solo due tipi di oggetti: 1, celle di tabella e 2, elemento in linea S.

Non ha alcun rapporto con nessun altro tipo di elemento HTML.

Non è che sia "chiazzato" o "un problema", è solo che non fa ciò che la maggior parte della gente vuole che faccia.

Idealmente, si eviterà di allineare verticalmente il testo del tutto, ma a volte è necessario. Ci sono vari modi per farlo e per decidere in che modo farlo, di solito dipende dalla particolare situazione in cui stai lavorando.

In questa situazione, se si può fare affidamento sul fatto che si tratti di una riga di testo, penso che la soluzione migliore sia quella di adattarsi otticamente con uno o più padding extra, oppure position-relative e rilasciarlo di alcuni pixel.