Cosa rende il testo su un elemento centrato verticalmente?

Sembra che ci sia un po ‘di magia attorno all’elemento

Some Text

E questo CSS:

 .button{ background: darkgrey; height: 40px; border: 2px solid grey; width: 100%; box-sizing: border-box; font-size: 14px; font-family: helvetica; text-align: center; margin-bottom: 20px; /*I'm aware I could use this to center it*/ /*line-height: 40px;*/ } 

Cosa rende il testo nell’elemento del pulsante centrato verticalmente? Webkit sembra predefinire un -webkit-box-align con un valore di center per l’elemento – almeno in Firefox – sono costruiti con un elemento interno tra il tag ed i suoi figli. In Firefox si chiama moz-button-content e non è qualcosa che può essere raggiunto con i CSS ed è stato impostato per visualizzare il blocco senza ereditare l’altezza del pulsante, puoi vedere questa dichiarazione di stile nel foglio di stile useragent

Poiché non puoi influenzare nessuno degli stili su questo elemento, sei costretto ad aggiungere lo stile ai tag . Questo porta al secondo problema: il browser è hardcoded per posizionare verticalmente il contenuto del pulsante .

Considerati questi due problemi, è ansible iniziare a vedere come il pulsante impone il centraggio del contenuto, prendere in considerazione:

   

Se assegni al button un’altezza – come il 48px del tuo violino, il testo sarà centrato perché l’elemento di moz-button-content è un blocco di visualizzazione e avrà solo l’altezza del contenuto (molto probabilmente l’altezza della linea del contenuto di default) e quando si mette accanto a un altro elemento si ottiene questo comportamento:

 * { box-sizing: border-box; margin: 0; border: 0; padding: 0; font-family: san-serif; background: none; font-size: 1em; line-height:1; vertical-align: baseline; } button, a { height: 3em; } button { background: red; } a { display:inline-block; background: green; } 
  Link Content 

Potresti usare il padding.

Per esempio

 padding: 20px 10px; 

Penso che l’unico motivo per questo comportamento sia che Google Chrome o i browser in generale prenderanno gli stili predefiniti dal tuo sistema operativo.

Ad esempio, se confronti il ​​pulsante o la barra di scorrimento su Google Chrome esegui in Windows 7 e Windows 8:

  • In Windows 7, il pulsante avrà una linea di sfumatura orizzontale al centro del pulsante

  • In Windows 8, la barra di scorrimento è in grado di dissolvenza in apertura e dissolvenza al clic

Questa è solo la mia opinione, ma spero che possa darti qualche idea 🙂

Puoi usare display:table-cell; vertical-align: middle; display:table-cell; vertical-align: middle; come metodo alternativo.

Su Mozilla Firefox ho ottenuto la proprietà -moz-appearance :

 -moz-appareance: button; 

Nella bozza HTML5, c’è una sezione Rendering , ma non specifica il posizionamento: S