Jak wyrównać tekst środkowy w niestandardowych przyciskach?

Mam to htmlJak wyrównać tekst środkowy w niestandardowych przyciskach?

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

W < przycisk> a < input>, tekst jest align środek przycisku ale w < a> i < div>, tekst jest pokazany górną część przycisku. Myślę, że wejście <> i < dziedziczą niektóre właściwości i wyrównują tekst w środku przycisku.

widzę to

i chcę, aby wszystkie przyciski wyrównać tekst w środku.

Klasa "btn" jest to

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

Każdy pomysł?

Źródło

2013-05-21 Bae

Możliwy duplikat [wyrównanie w pionie przycisku przycisku] (http://stackoverflow.com/questions/15487408/buttons-text-vertical-align) – Pensierinmusica

Aby pionowo centrum tekst z tych elementów, wystarczy ustawić line-height tekstu tego elementu równej height elementu i ustaw box-sizing do border-box (w celu umożliwienia height wszystkich elementów są takie same:

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

JS Fiddle demo.

Oczywiście to powoduje problemy, należy owinąć tekst do drugiej linii.

Źródło

2013-05-21 10:21:48

-1

Dodaj display:table-cell; dla klasy .btn.

jak

.btn{display:table-cell;}

To stworzy pionowe wyrównanie dla Div jak również a elementy mające .btn klasy. Mam nadzieję, że to pomoże.

Źródło

2013-05-21 10:24:07 Nitesh

punkt: nieobsługiwany w IE7 lub niższy – Chalist

IE7 lub niższy? Sam przycisk tagu nie jest obsługiwany w IE7 lub niższym. Prawdopodobnie zapomniałeś o tym wspomnieć. Dobrze? - @chalist – Nitesh

Zignorowałeś także ważny punkt fragmentu. tj. tag tytułu. Wspomniał o aplikacji o nazwie HTML5 App . HTML5. Możesz napisać do użytkownika, który o to poprosił i powiedzieć, że jest "nieobsługiwany w IE7 lub niższym". Dobrze? - @chalist – Nitesh

Proszę usunął padding:4px 12px; z klasy BTN i ustawić line-height: jak na swoje wymagania, a następnie tekst powinien przyjść w środku pola.

Źródło

2013-05-21 10:31:00

-1

usunąć ten: height: 80px;

Twój padding: padding: 4px 12px;

Po usunięciu wyściółka wysokość musi być ~ padding: 30px 12px;

Musisz ustalić grzywnę przekładki (opartego na wysokości tekstu).

Źródło

2013-05-21 10:31:30 Ifch0o1

Myślę, że utwórz wysokość z ustawieniem wyściółki dla elementu a.

Źródło

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

Nadzieja jest to pomocne

Źródło

2013-05-21 10:49:48

-3

vertical-align:center;

użycie że i to będzie działać

Źródło

2013-10-11 08:20:43

powinno być, po prostu: line-height: 0.25em;

Źródło

2016-04-12 13:24:24 mrcat

Jak wyrównać tekst środkowy w niestandardowych przyciskach?

Odpowiedz

Powiązane problemy