Как выравнивать по вертикали текст, который выполняет несколько строк

Question

Я понимаю, что, вероятно, было несколько вопросов с заголовком, похожим на это, но я думаю мой вопрос немного другой, я попытался сделать некоторое фоновое чтение и, похоже, не может найти изящное решение для этого в любом месте (хотя это возможно потому, что его не существует)

В принципе, у меня есть три коробки, каждая из которых имеет изображение слева, а текст в них - проблема заключается в том, что текст выравнивается по вертикали, делая некоторые фоновые показания о том, как работает вертикальный выравнивание (я был не совсем уверен раньше). Я попытался реализовать его для решения проблемы, и он отлично работает на всех, кроме одного из ящики, вы увидите, что я имею в виду в демо ниже:

http://jsfiddle.net/5vxSP/1/

Последняя коробка имеет вторую строку текста, и эта строка просто заканчивается ниже изображений, есть несколько способов, которыми я могу думать делать это, но большинство из них включает с помощью терки для изображения , и поля для текста последнего окна, который, хотя работа не является особенно приятным способом сделать это (ну, я так думаю. , .)

Есть ли элегантный способ сделать это, чтобы текст оставался посередине коробки независимо от количества строк/шрифтов, которые я решил использовать?

Если я должен использовать свое оригинальное решение, я рад, что это было интересно, мне было просто интересно узнать, есть ли лучший способ сделать это, что я еще не нашел.

Answer 1

Основываясь на предлагаемом решении для аналогичной проблемы here, вы можете сделать что-то вроде этого.

1. Поместите тексты ссылок внутри пролетов.
2. Дайте эти пролеты display:inline-block и правильную ширину; которые являются исходными ширинами элементов li за вычетом изображений и прокладок.

.main-services { 
 
    overflow: auto; 
 
    padding: 17px 0 9px 0; 
 
} 
 
.main-services li { 
 
    list-style: none; 
 
    float: left; 
 
    border-right: 1px dashed #E53B00; 
 
    padding-right: 14px; 
 
} 
 
.main-services li a { 
 
    display: block; 
 
    height: 78px; 
 
    color: #ED5D04; 
 
    text-decoration: none; 
 
} 
 
.main-services li a img { 
 
    vertical-align: middle; 
 
} 
 
.main-services li a span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.service-1 span { width: 85px; } 
 
.service-2 span { width: 131px; } 
 
.service-3 span { width: 151px; }

<ul class="main-services border-common"> 
 
    <li class="service-1"> 
 
    <a href="#"> 
 
     <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" /> 
 
     <span>Some text goes here</span> 
 
    </a> 
 
    </li> 
 
    <li class="service-2"> 
 
    <a href="#"> 
 
     <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" /> 
 
     <span>More text here</span> 
 
    </a> 
 
    </li> 
 
    <li class="service-3"> 
 
    <a href="#"> 
 
     <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" /> 
 
     <span>More text goes here but this text overruns</span> 
 
    </a> 
 
    </li> 
 
</ul>

Или проверить обновления на скрипке (включая оригинальный сброса таблицы стилей): http://jsfiddle.net/MrLister/5vxSP/15/

Примечание: это не будет работать в IE8.

Answer 2

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

<div> 
    <span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span> 
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span> 
</div> 

vertical-align в CSS выравнивает встроенный элемент он применяется с другими строчными элементами вокруг него. Только на таблицах он выравнивается внутри ячейки таблицы.