Отключить кнопку HTML центрирования внутренних элементов

Question

Учитывая этот пример: http://jsfiddle.net/afkjnzss/, можно переопределить button стилей, которые делают его внутреннее содержание (div в примере) идет центр (вертикально)?

В принципе, я хочу, чтобы он вел себя как обычный div, но используя button. Внутренний контент должен быть размещен начиная с вершины. Я ищу универсальное решение.

Причина: Я использую button, потому что мне нужен атрибут [disabled], который, видимо, работает только на элементах формы. Кроме того, использование pointer-events: none не является вариантом, потому что мне нужно поддерживать IE9 +.

Answer 1

button элементы заменяются элементами, поэтому их представление выходит за рамки CSS.

Итак, вместо того, чтобы не центрировать содержимое, я предлагаю использовать обертку (например, .text) внутри кнопки, которая заполняет все это. Таким образом, не имеет значения, если обертка центрирована, потому что они имеют одинаковую высоту.

#button { 
 
    border: 0; 
 
    padding: 0;  
 
} 
 
#button > .text { 
 
    min-height: 100px; 
 
}

<button id="button"> 
 
    <div class="text">blabla</div> 
 
</button>

Answer 2

Редактировать: после редактирования вопрос его более понятно, что вы хотите, может быть this?

CSS:

body, html { 
    height: 100%; 
} 

#button{ 
    position: relative; 
    border: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

.text { 
    position: absolute; 
    top: 0; 
}