Обтекание текста в кнопках CSS и странных проблемах с высотой

Question

У меня есть следующая настройка CSS и Button для создания кнопок в моем проекте. Однако теперь они хотят, чтобы все кнопки были одинаковой ширины и не увеличивались в зависимости от размера текста. И они хотят, чтобы текст обернулся. У меня есть обертка текста и такая же ширина и высота с фиксированной шириной и высотой, но она перемещает кнопки в странные места, и текст в центре нужно перемещать вверх, поэтому все это централизованно (если это имеет смысл!)

http://www.screenup.info/uploads/4548070.jpeg - пример того, как он выходит. Как вы видите, они прыгали повсюду, и текст не посередине, когда он обертывается.

jsFiddle: http://jsfiddle.net/DqUfx/

.dark-orange-button 
{ 
    -moz-box-shadow: inset 0px 1px 0px 0px #fed897; 
    -webkit-box-shadow: inset 0px 1px 0px 0px #fed897; 
    box-shadow: inset 0px 1px 0px 0px #fed897; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105)); 
    background: -moz-linear-gradient(center top, #f6b33d 5%, #d29105 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#f6b33d' , endColorstr= '#d29105'); 
    background-color: #f6b33d; 
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px; 
    border-radius: 9px; 
    border: 3px solid #eda933; 
    display: inline-block; 
    color: #ffffff; 
    font-family: arial; 
    font-size: 15px; 
    font-weight: bold; 
    width: 300px; 
    height: 18px; 
    text-align:center; 
    padding: 23px 56px; 
    text-decoration: none; 
    text-shadow: 1px 1px 0px #cd8a15; 
} 

.dark-orange-button:hover 
{ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d)); 
    background: -moz-linear-gradient(center top, #d29105 5%, #f6b33d 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#d29105' , endColorstr= '#f6b33d'); 
    background-color: #d29105; 
} 

.dark-orange-button:active 
{ 
    position: relative; 
    top: 1px; 
} 

Answer 1

Чтобы исправить неправильный монтаж, добавьте vertical-align: top, где у вас есть display: inline-block.

http://jsfiddle.net/thirtydot/DqUfx/1/

Вертикально центрирование несколько строк текста легко, если вам не нужно поддерживать IE6/7 - использовать display: table-cell.

http://jsfiddle.net/thirtydot/DqUfx/2/

Если вам нужно поддерживать IE6/7, выглядят here или here.