вертикальное выравнивание текста в относительном div

Question

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

.rollover{ 
position: relative; 
width: auto; 
background-color: #000; 
opacity: 0.5; 
height: 40px; 
overflow: hidden; 
padding-left: 10px; 
} 

.rollover a{ 
font-family: lucida; 
font-size: 10px; 
color: #FFF; 
display: block; 
line-height: 11px; 
float: left; 
text-decoration: none; 
} 

и мой HTML-код:

<div class="rollover"> 
    <a href="">ONE LINE TEXT</a> 
</div> 

или

<div class="rollover"> 
    <a href="">FIRST LINE<br/>SECOND LINE</a> 
</div> 

Как я могу сделать?

Спасибо, Маттиа

Answer 1

Недавно столкнулся с проблемой, решение, которое я придумал (если вы должны сделать это в том случае, когда вы не можете использовать display:table-cell), чтобы добавить немного разметки и использовать line-height Недвижимость.

line-height только на внешнем div работает нормально, когда есть только одна строка. Когда вы сталкиваетесь с чем-то, что может быть многострочным, решение должно использовать две высоты линии.

Разметка используется следующее:

<div class="rollover"> 
    <span> 
     <a href="">ONE LINE TEXT</a> 
    </span> 
</div> 
<div class="rollover"> 
    <span> 
     <a href="">FIRST LINE<br/>SECOND LINE</a> 
    </span> 
</div>​ 

Обратите внимание на добавленную <span>.

Фокус в том, что пролет будет линией с линией высотой 40px (унаследованной от rollover div). И он также будет иметь свойство float. Потому что с плавающим элементом вы не можете использовать vertical-align. Внутри этого промежутка мы будем иметь ссылку с высотой линии 11px и вертикальной выровненной серединой. Это середина пролета. И вот оно.

СМЧ нужны не является следующее:

.rollover{ 
    position: relative; 
    width: auto; 
    background-color: #000; 
    opacity: 0.5; 
    height: 40px; 
    overflow: hidden; 
    padding-left: 10px; 
    line-height:40px; 
} 

.rollover span{ 
    float: left; 
} 
.rollover a{ 
    font-family: lucida; 
    font-size: 10px; 
    color: #FFF; 
    line-height: 11px; 
    text-decoration: none; 
    vertical-align:middle; 
    display:inline-block;  
} 

Обратите внимание, что я изменил показ от block к inline-block, в противном случае, не vertical-align.

И немного скрипки, чтобы показать: http://jsfiddle.net/r5RFx/ (я добавил некоторые границы, чтобы увидеть блоки на странице)