In Firefox 'A' mostra nel mezzo, su Chrome/IE non è così:Semplice CSS: Testo non centrare in un pulsante
<button type="button" style="width:24px; text-align:center; vertical-align:middle">A</button>
Nota seguente ha gli stessi risultati:
<button type="button" style="width:24px;">A</button>
Edit: Ora sembra essere fissato in Chrome 5.0
Testing questo in Chrome, è necessario aggiungere
padding: 0px;
Per il CSS.
IE instilla i propri padding sui pulsanti (grazie a Windows). La formattazione dei pulsanti è fastidiosa perché richiede OS e la formattazione specifica del browser. È lo stesso motivo per cui puoi regolare le dimensioni di '' o dei pulsanti di stile nei browser in Safari. Faresti bene a ricordare di usare sempre un reset CSS. – dclowd9901
Questo non mi è venuto in mente. Grazie, ha funzionato come previsto per Chrome! Anche se purtroppo ha fatto sì che Firefox ora fosse un po 'fuori centro. – gbhall
In realtà se qualcun altro ha questo problema qui è la correzione che funziona coerente in IE, FF e Chrome:
padding:0 3px 0 3px; /* Purely for IE, however doesn't affect Firefox. Chrome requires 0 */
-webkit-padding-start: 0; –
gbhall
Che dire:
<input type="button" style="width:24px;" value="A"/>
Di solito, il codice dovrebbe funzionare ...
Ma qui è un modo per centrare il testo in css:
.text
{
margin-left: auto;
margin-right: auto;
}
Questa si è rivelata a prova di proiettile per me ogni volta che voglio centrare il testo con css.
Il problema è che i pulsanti vengono visualizzati in modo diverso nei vari browser. In Firefox, 24px è sufficiente per coprire il padding predefinito e lo spazio consentito per il tuo personaggio "A" e centrarlo. In IE e Chrome, non lo è, quindi imposta automaticamente il valore minimo necessario per coprire il riempimento sinistro e il testo senza tagliarlo, ma senza aggiungere ulteriore larghezza al pulsante.
È possibile aumentare la larghezza o, come suggerito sopra, modificare il riempimento. Se togli la larghezza esplicita, dovrebbe funzionare anche.
Come metodo di forza più bruta che ho trovato ha lavorato per me:
Prima avvolgere il testo all'interno del pulsante in un arco, e quindi applicare questa css per quel lasso
var spanStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
}
* sopra l'installazione per lo stile in linea
Sembra che funzioni qui: http://jsbin.com/ohecu/. Potrebbe non essere centrato perché 24px è piuttosto piccolo. – Joel
Lo so, purtroppo ho bisogno che sia di quelle dimensioni. C'è ancora spazio, funziona in Firefox ma non in Chrome. – gbhall