Выровнять текст внутри элемента кнопки?

У меня есть несколько кнопок, которые имеют различное количество строк текста, все с фиксированной шириной и высотой. Кажется, что все, что я помещал между тегами <button> </button>, по умолчанию по вертикали выровнено по середине. Я хочу вертикально выровнять текст внутри кнопки вверху, чтобы первая строка каждой кнопки начиналась с одной строки.Выровнять текст внутри элемента кнопки?

Один из способов я нашел this, но как вы можете видеть в этом примере (http://jsfiddle.net/d27NA/1/), при таком подходе, я должен вручную назначить верхнее свойство для кнопок, которые содержат тексты разной длины, иначе кнопки, которые содержат более длинный текст переполнит верх.

Мне интересно, есть ли альтернативный подход, который позволит решить эту проблему более элегантным способом. Благодарю.

HTML:

<div> 
    <button class="test"> 
     This text is vertically center-aligned. I want this to be top-aligned. 
    </button> 
</div>

CSS:

.test{ 
    font-size:12px; 
    line-height:14px; 
    text-align:center; 
    height:100px; 
    width:100px; 
}

источник

2013-04-26 Jay

Угу, просто определить кнопку как position:relative; и продолжительность, как position:absolute;top:0;left:0; и вы в бизнесе.

jsFiddle updated

UPDATE

Таким образом, в течение трех лет с момента этого ответа, Flexbox становится все более заметным. Таким образом, вы можете сделать это сейчас:

.test { 
    display: inline-flex; /* keep the inline nature of buttons */ 
    align-items: flex-start; /* this is default */ 
}

Это должно дать вам то, что вы ищете. Возможно, вам понадобится применить appearance: none; (с соответствующими префиксами браузера), но это должно быть сделано.

источник

2013-04-26 20:44:14 PlantTheIdea

Это здорово. Однако кажется, что для текста, который помещается в одну строку, текст выравнивается влево (как видно из jsfiddle). Есть ли способ исправить это, чтобы выровнять по центру? – Jay

Исправлено это, также устанавливая 'right: 0' – Jay

Да, извините за отложенный ответ. Вы можете либо установить «right: 0;», как и вы (что я предпочитаю), или установить явную ширину, например 'width: 100%;'. в любом случае работает. – PlantTheIdea

Вам просто нужно изменить CSS Кнопка и Span. Раздельные как CSS и сделать следующие изменения:

button { 
    display: block; 
    position: relative; 
} 

span { 
    display: block; 
    position: absolute; //<-- Make it absolute 
    top: 0px;   //<-- Set the top property accordingly. In this case 0px;  
}

Установите положение диапазона в абсолютной и установить верхнее свойство соответственно

источник

2013-04-26 20:48:18 Raman

вы не включили свойство X, например 'left: 0;'. firefox pukes при этом иногда, просто голова. – PlantTheIdea

@PlantTheIdea .... спасибо за исправление ... Я не знал об этом. :) – Raman

Выровнять текст внутри элемента кнопки?

ответ

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