Текст кнопки по вертикали

Question

У меня здесь сложная проблема. Я хотел бы вертикальное выравнивание моего текста внутри кнопки

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

А вот мой 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; 
} 

Вы можете проверить его здесь http://jsfiddle.net/kA8pp/. Я хочу, чтобы текст был внизу. Большое спасибо!

EDIT: Я не могу объяснить это хорошо, так вот картина этого http://i.imgur.com/WGKltUa.png :)

Answer 1

Попробуйте padding-top:65px; в классе кнопки

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

Вы можете использовать line-height для достижения своей цели.

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

Кнопки стиль по-разному: вариация на тему Стилизация

Элемент <button> ведет себя немного иначе, чем некоторые другие элементы, например <div>. Если вы установили display: table-cell в кнопку, это не повлияет на макет, поэтому vertical-align позволит вам контролировать положение текста.

С другой стороны, можно сделать следующее:

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

и использовать следующий 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; 
} 

В этом случае, у вас есть некоторый контроль, регулируя отступы и высоту.

Если вы привязываете действие JavaScript к элементу, на самом деле не имеет значения, что такое тег, div или кнопка.

Этот подход может иметь некоторые преимущества в конкретных ситуациях.

Если вы применили вышеуказанный CSS к тегу кнопки, это не сработает. Хорошо знать.

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

Answer 4

Вы можете использовать flexbox (проверьте browser support, в зависимости от ваших потребностей).

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

Answer 5

Это должно сработать для вас!

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