it-swarm.com.de

Wie richten Sie den mittleren Text in benutzerdefinierten Schaltflächen aus?

Ich habe dieses 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>

In <button> und <input> befindet sich der Text in der Mitte der Schaltfläche. In <a> und <div> wird Text oberhalb der Schaltfläche angezeigt. Ich denke, <button> und <input> erben einige Eigenschaften und richten den Text in der Mitte des Buttons aus.

Ich sehe es

pic

und ich möchte, dass alle Tasten den Text in der Mitte ausrichten.

Die Klasse "btn" ist dies

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

Irgendeine Idee?

11
Bae

Um den Text dieser Elemente vertikal zu zentrieren, setzen Sie einfach den line-height des Elementtexts auf die height des Elements und setzen Sie box-sizing auf border-box (damit die height aller Elemente gleich sind:

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

JS Fiddle Demo .

Offensichtlich führt dies zu Problemen, wenn der Text in eine zweite Zeile umgebrochen wird.

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

Hoffe das ist hilfreich

0
Abhinav Jayaram

Bitte entfernen Sie die padding:4px 12px; aus der btn-Klasse und legen Sie line-height: entsprechend Ihrer Anforderungen fest. Der Text sollte in der Mitte des Felds angezeigt werden.

0
Saurav Das

Ich denke, erstellen Sie die Höhe mit der Einstellung für das a-Element.

0
Chalist

es sollte einfach sein: Zeilenhöhe: 0.25em;

0
mrcat