Come allineare il testo centrale nei pulsanti personalizzati?

Ho questo htmlCome allineare il testo centrale nei pulsanti personalizzati?

<head> 
<title>HTML5 App</title> 

<link rel="stylesheet" type="text/css" href="css/custom.css"> 
<link rel="stylesheet" type="text/css" href="css/buttons.css"> 

</head> 

<body> 
<!--Estructura --> 


<div id="botones"> 
    <button class="btn" data-am-type="button">Soy un &lt;button&gt;</button> 
    <a class="btn" data-am-type="button">Soy un &lt;a&gt;</a> 
    <div class="btn" data-am-type="button">Soy un &lt;div&gt;</div> 
    <input class="btn" type="button" value="Soy un <input>"> 
</div> 

</body>

In < pulsante> e < input>, il testo è centro allineamento del pulsante ma in < a> e < div>, il testo viene mostrato superiore del pulsante. Penso che il pulsante <> e l'input < ereditano alcune proprietà e quindi allineano il testo nel mezzo del pulsante.

vedo questo

e voglio che tutti i pulsanti allineare il testo al centro.

La classe "btn" è questo

.btn{ 
display: inline-block; 
padding: 4px 12px; /* Padding por defecto */ 
font-size: 16px; /* Tamaño fuente por defecto */ 
line-height: 20px; /* Tamaño de linea */ 
text-align: center; 
vertical-align: middle; 

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 

cursor: pointer; 
height: 80px; 
background-color: #f5f5f5; /* por si no se ve el gradiente, aunque si lo pruebo en Chrome nunca deberia verse este color*/ 
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); 

border: 1px solid #cccccc; 
-webkit-border-radius: 4px; 
}

Qualche idea?

fonte

2013-05-21 Bae

Possibile duplicato di [Allineamento verticale testo pulsante] (http://stackoverflow.com/questions/15487408/buttons-text-vertical-align) – Pensierinmusica

Per verticalmente centro il testo di tali elementi, è sufficiente impostare il line-height del testo dell'elemento uguale alla height dell'elemento, e impostare box-sizing a border-box (affinché il height di tutti gli elementi sono uguali:

.btn { 
    /* other, unchanged, CSS */ 
    line-height: 80px; /* <- changed this */ 
    box-sizing: border-box; /* <- added this */ 
}

JS Fiddle demo.

Ovviamente questo non causa problemi, dovrebbe avvolgere il testo ad una seconda linea.

fonte

2013-05-21 10:21:48

-1

Aggiungere un display:table-cell; per la classe .btn.

come

.btn{display:table-cell;}

Ciò creerà l'allineamento verticale per la Div nonché a elementi aventi la .btn classe. Spero che questo aiuti.

fonte

2013-05-21 10:24:07 Nitesh

punto: non supportato in IE7 o inferiore – Chalist

IE7 o inferiore? Il pulsante tag stesso non è supportato per IE7 o versioni precedenti. Probabilmente hai dimenticato di dirlo. Destra? - @chalist – Nitesh

Hai anche ignorato un punto importante dello snippet. io il tag del titolo. Ha menzionato l' HTML5 App. HTML5. Puoi scrivere all'utente che l'ha chiesto e dire che è "non supportato in IE7 o inferiore". Destra? - @chalist – Nitesh

prega rimosso il padding:4px 12px; dalla classe BTN e impostare il line-height: secondo il vostro requisito, allora il testo dovrebbe venire in centro area.

fonte

2013-05-21 10:31:00

-1

Inserisci questa: height: 80px;

tuo padding: padding: 4px 12px;

Dopo aver rimosso l'imbottitura altezza deve essere ~ padding: 30px 12px;

È necessario impostare la multa imbottitura (in base alla tua altezza del testo).

fonte

2013-05-21 10:31:30 Ifch0o1

Penso di creare altezza con l'impostazione di riempimento per l'elemento a.

fonte

2013-05-21 10:32:30 Chalist

border: none; 
outline: 0; 
cursor: pointer; 
text-decoration: none; 
overflow: visible; 
background: none; 
padding:0 16px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
color: #222

Spero che questo è utile

fonte

2013-05-21 10:49:48

-3

vertical-align:center;

uso che e funzionerà

fonte

2013-10-11 08:20:43

che dovrebbe essere, semplicemente: line-height: 0.25em;

fonte

2016-04-12 13:24:24 mrcat

Come allineare il testo centrale nei pulsanti personalizzati?

risposta

Problemi correlati