Как отключить автоматическое вертикальное выравнивание содержимого <button>?

Есть ли способ отключить эту функцию? Содержание <button> всегда вертикально центрировано, в отличие от того, что происходит в обычном теге HTML.Как отключить автоматическое вертикальное выравнивание содержимого <button>?

Демо: http://jsfiddle.net/HbqnR/

Я хочу <button> ведут себя как <a>, с текстом в верхнем левом углу кнопки.

Я ищу конкретное исправление для WebKit, возможно, существует некоторая свойство css, которое управляет этим поведением. Хаки приветствуются, но без дополнительной разметки!

Спасибо заранее :)

.button 
{ 
    display:inline-block; 
    height:200px; 
    border:4px gainsboro outset; 
    background:silver; 
    vertical-align:middle; 
    padding:20px; 
    box-sizing:border-box; 
    text-decoration:none; 
    width:200px; 
    text-align:left; 
} 

<button class="button">&lt;button&gt;</button> 
<a href="http://www.google.com" class="button">&lt;a&gt;</a>

источник

2013-10-24 Anonymous

Я не думаю, что мы можем отключить это – underscore

Также также. Мы можем попробовать javascript – underscore

Возможный дубликат [Текст кнопки по вертикали] (HTTP: // StackOverflow.com/questions/15487408/buttons-text-vertical-align) –

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

button { 
    position: relative; 
} 

button > span { 
    position: absolute; 
    top: 0; 
} 

<button><span>&lt;button&gt;</span></button>

источник

2013-10-24 03:47:15 stevelove

Да, я рассмотрел это решение, но я ищу что-то, что не заставляет меня использовать дополнительную разметку, спасибо в любом случае! :) –

Не беспокойтесь, и удачи. – stevelove

-1

Проверьте это: P JSFIDDLE DEMO

.button 
{ 
    display:block; 
    height:200px; 
    border:4px gainsboro outset; 
    background:silver; 
    vertical-align:top; 
    padding:20px; 
    box-sizing:border-box; 
    width:200px; 
    text-align:left; 
    text-indent: 0; 
    white-space: normal; 
    word-spacing: 0px; 
    letter-spacing: 0px; 
    float: left; 
    top:0; 
}

Это может работать хех. Я действительно не знаю, для чего вам нужна кнопка. Но это становится так же, как то, о чем вы спрашивали раньше. Используется здесь.

<title>Documento sin título</title> 
<body> 
<form id="form1" name="form1" method="post" action=""> 
    <button class="button">tODAY WE ARE HERE WONDERING WHAT TO DO<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></button> 
</form> 
</body>

источник

2013-10-24 04:06:33

Это просто добавление кучи пустых абзацев, чтобы обеспечить общий размер текста для роста и, таким образом, вытащить первую строку вверх. – PaulT

Вы не можете. Не без введения <span> в позиционировании <button> и использование:

<button class="button"><span>&lt;button&gt;</span></button>

Затем добавьте следующее .button:

.button 
{ 
    /* ... */ 
    position:relative; 
} 

.button > span { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
}

Demo

Если вы хотите сохранить HTML нетронутым, вы можете изменить документ с использованием JavaScript также:

$('button.button').wrapInner('<span>');

Обратите внимание, что если JavaScript отключен, он не будет работать :)

источник

2013-10-24 04:14:01

Добавить это:

button:before { 
    content:''; 
    display:block; 
    margin-top:-50%; 
}

См http://jsfiddle.net/r6yXw/

И, если вы хотите применить только WebKit на основе браузеров, обернуть его в

@media screen and (-webkit-min-device-pixel-ratio:0) { ... }

см http://jsfiddle.net/r6yXw/1/

источник

2013-10-24 07:16:41 Alohci

Как отключить автоматическое вертикальное выравнивание содержимого <button>?

ответ

Смежные вопросы