vertical-align не работает

Question

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

Я хочу, чтобы текст всегда быть в «средний» вертикальное положение слева на изображение (изображение test.gif имеет разные размеры)

У меня есть такая структура HTML элементов (к сожалению, я не могу изменить его из-за системных ограничений)

<div class="wrapper"> 
    <div class="logo"> 
     <img alt="some text" src="http://localhost/test.gif"> 
    </div> 
    <div class="source">some text</div> 
</div> 

CSS:

.wrapper {clear: both;} 
.logo {float: left;} 
.source { float: left;line-height: 16px;} 

нахождения на 1,5 часа и не повезло. Пытался применить вертикальное выравнивание к различным элементам с различным позиционированием и т. Д. ... Пожалуйста, помогите!

Answer 1

Если вам не нужна поддержка IE7, попробуйте следующее:

.wrapper { display: table; } 
.logo { display: table-cell; } 
.source { display: table-cell; vertical-align: middle; } 

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

Answer 2

Общая проблема, но хорошо объясняется здесь: http://phrogz.net/css/vertical-align/

Ключевые моменты

Укажите родительский контейнер, как position:relative или position:absolute

Укажите фиксированную высоту на ребенка-контейнера.

Позиция позиции: абсолютная и top:50% на дочернем контейнере для перемещения сверху вниз к середине родителя.

margin-top:-yy, где yy - половина высоты дочернего контейнера для смещения предмета вверх.

<style type="text/css"> 
    #myoutercontainer { position:relative } 
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em } 
</style> 

... 

<div id="myoutercontainer"> 
    <div id="myinnercontainer"> 
     <p>Hey look! I'm vertically centered!</p> 
     <p>How sweet is this?!</p> 
    </div> 
</div>