Как выровнять текст вертикально по центру на фиксированной высоте? - PullRequest
Новая
       11

Как выровнять текст вертикально по центру на фиксированной высоте?

1 голос
/ 22 июня 2011

У меня есть изображения height=79px и width=138px, и я хочу выровнять текст по центру по центру <li>.Для этого я пишу свой CSS как: 

#left-container .col1 li
{
    background:url(../images/button.png) no-repeat top center;
    height:79px;
    line-height:79px;
    font-weight:bold;
    font-size:1.5625em; /* 25px */
    text-align:center;
    text-transform:uppercase;
    margin-bottom:1px;
    position:relative;  
}

Это нормально для одного слова, например, Qty., но не для двух слов, например Item Options, Hold Selected и т. Д.

Итак, можете ли вы предложить мне создать отдельные классы для каждой кнопки, чтобы регулировать высоту линий отдельно, или есть какой-либо другой унифицированный способ настройки всех высот линий только в одном классе?

Ответы [ 2 ]

3 голосов
/ 22 июня 2011

Если вы установите свойство line-height равным 79px, каждая строка текста будет иметь высоту 79px.

Для вертикального центрирования текста внутри элемента вам необходимо использовать свойство вертикального выравнивания вместе со свойством display: table для элемента контейнера. Идея состоит в том, чтобы заставить элемент работать как таблица.

Итак, вам нужен элемент контейнера, действующий как таблица, внутренний элемент, действующий как строка таблицы, а внутри него элементы, действующие как ячейки таблицы.

Мне удалось позволить вашему .col1 вести себя как стол: 

#left-container .col1 {
    display:table;
}

Тогда ваш уль действует как строки таблицы: 

#left-container .col1 ul {
    display:table-row;

}

И затем каждый элемент li, действующий как ячейка таблицы, добавляет этот CSS к вашему: 

#left-container .col1 li  {  
    display:table-cell;
    vertical-align:middle; 
}

Я удалил свойство line-height.

Обратите внимание, что теперь вам нужно иметь несколько ul для каждой строки, которую вы хотите иметь в "таблице", поэтому, если вы хотите иметь ту же структуру, что и раньше, вам нужно что-то вроде этого: 

<div id="left-container">
    <div class="col1">
        <ul>
            <li>List item 1 </li>
        </ul>
        <ul>
            <li>List item 2 </li>
        </ul>
        <ul>
            <li>List item 3 </li>
        </ul>
        <ul>
            <li>List item 4 </li>
        </ul>
        <ul>
            <li>List item 5 </li>
        </ul>
    </div>
</div>

UPDATE

Посмотрите на это здесь: http://jsfiddle.net/W2H6a/22/

0 голосов
/ 22 июня 2011

попробуйте это:

HTML 

<div id="left-container">
    <div class="col1">
        <ul>
        <li>List item 1 </li>
        <li>List item 2 </li>
        <li>List item 3 </li>
        <li>List item 4 </li>
        <li>List item 5 </li>
        </ul>
    </div>
</div>

CSS: 

#left-container .col1 li  { 
    height:79px; 
    width:138px;
    line-height: 70px;
    font-weight:bold;   
    text-align:center;
    text-transform:uppercase;
    margin-bottom:1px;   
    border: 1px solid green;  /* Just to check */
 }

Смотрите демонстрацию здесь:http://jsfiddle.net/W2H6a/3/

...