Tekst na przycisku w pionie wyrównanie

Question

Mam tutaj podchwytliwy problem. Chciałbym pionowe wyrównać mój tekst wewnątrz przycisku

<button id="rock" onClick="choose(1)">Rock</button> 

i tu jest mój CSS

button { 
    font-size: 22px; 
    border: 2px solid #87231C; 
    border-radius: 100px; 
    width: 100px; 
    height: 100px; 
    color: #FF5A51; 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
} 
button:active { 
    font-size: 22px; 
    border: 2px solid red; 
    border-radius: 100px; 
    width: 100px; 
    height: 100px; 
} 

Można to sprawdzić tutaj http://jsfiddle.net/kA8pp/. Chcę mieć tekst na dole. Dziękuję bardzo!

EDIT: Nie mogę tego wyjaśnić tak dobrze tutaj jest obraz z niej http://i.imgur.com/WGKltUa.png :)

Answer 1

Spróbuj padding-top:65px; w klasie przycisk

button { 
    font-size: 22px; 
    border: 2px solid #87231C; 
    border-radius: 100px; 
    width: 100px; 
    height: 100px; 
    color: #FF5A51; 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
    padding-top:65px; 
} 

JS Fiddle Demo

Answer 2

Można użyć line-height, aby osiągnąć swój cel.

button { 
    font-size: 22px; 
    border: 2px solid #87231C; 
    border-radius: 100px; 
    width: 100px; 
    height: 100px; 
    color: #FF5A51; 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
    line-height: 150px; 
    overflow: visible; 
} 

http://jsfiddle.net/kA8pp/2/

Answer 3

Przyciski Style inaczej: odmianą Styling

Element <button> zachowuje się nieco inaczej niż niektóre inne elementy, na przykład <div>. Jeśli ustawisz display: table-cell w przycisku, nie wpłynie to na układ, więc vertical-align pozwoli ci kontrolować pozycję tekstu.

Z drugiej strony, można wykonać następujące czynności:

<div class="button" id="rock" onClick="choose(1)">Rock</div> 

i użyć następującego CSS:

.button { 
    font-size: 22px; 
    border: 2px solid #87231C; 
    border-radius: 100px; 
    width: 100px; 
    height: 90px; 
    color: #FF5A51; 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
    display: table-cell; 
    vertical-align: bottom; 
    text-align: center; 
    padding-bottom: 10px; 
} 

W tym przypadku, masz pewną kontrolę poprzez regulację wyściółka i wysokość.

Jeśli wiążisz działanie JavaScript z elementem, nie ma to większego znaczenia niż znacznik, element div lub przycisk.

Takie podejście może przynieść pewne korzyści w określonych sytuacjach.

Jeśli zastosujesz powyższy styl CSS do tagu przycisku, nie zadziała. Dobrze wiedzieć.

http://jsfiddle.net/audetwebdesign/QSap8/

Answer 4

Można użyć flexbox (sprawdź browser support, w zależności od potrzeb).

button { 
    display: inline-flex; 
    align-items: flex-end; 
} 

Answer 5

To powinno działać!

<pre> 
.button{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    color: #444; 
    width: 32px; 
    padding: 2px; 
    margin-left: 5px; 
    background-color: #fdfdfd; 
    border: 1px solid #cdcdcd; 
    cursor: pointer; 
} 
</pre>