web-dev-qa-db-fra.com

Comment aligner le texte central dans les boutons personnalisés?

J'ai ce html

<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>

Dans <button> et <entrée>, le texte est aligné au centre du bouton, mais dans <a> et <div>, le texte est affiché en haut du bouton. Je pense que <button> et <input> héritent d’une propriété et qu’ils alignent le texte au milieu du bouton.

Je vois ça

pic

et je veux que tous les boutons alignent le texte au milieu.

La classe "btn" est la suivante

.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;
 }

Une idée?

htmlcsshtml5css3
11
Bae

Pour centrer verticalement le texte de ces éléments, définissez simplement le line-height du texte de l'élément égal à la height de l'élément, et définissez box-sizing à border-box (pour que la height de tous les éléments soit identique:

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

Démo de JS Fiddle .

Évidemment, cela pose problème, si le texte se termine à la deuxième ligne.

14
David Thomas
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

J'espère que c'est utile

0
Abhinav Jayaram

S'il vous plaît enlevé le padding:4px 12px; de la classe btn et définissez le line-height: selon vos besoins, le texte doit apparaître au centre de la boîte.

0
Saurav Das

Je pense que créer hauteur avec la mise en padding pour l'élément a.

0
Chalist

ce devrait être simplement: line-height: 0.25em;

0
mrcat