вертикальное выравнивание среднее не работает

Я хочу, чтобы текст перед изображением находился посредине этого!вертикальное выравнивание среднее не работает

Моя проблема вертикальной Выровнять по середине не работает ...

что не так?

<div class="comments"> 
<div class="pull-left lh-fix"> 
<img class=foto src="/$foto" class="imgborder"> 
</div> 

<div class="comment-text pull-left"> 
<span class="pull-left color strong"><a href="/anna">anna</a>:</span> dododod 
</div> 
</div> 

.pull-left { float: left; } 
.lh-fix { line-height: 0 !important; } 

.comments { 
    position:relative; 
    display:block; 
    overflow:auto; 
    padding-left:15px; 
    padding-top:8px; 
    padding-bottom:8px; 
    border:1px solid #000; 
} 


.comment-text { 
    margin-left: 8px; 
    color: #333; 
    vertical-align:middle; //not working? 
    line-height:normal; 
    width: 85%; 
    text-align:left; 
} 

.foto{ 
    width:50px; 
    height:50px; 
    float:left; 
}

https://jsfiddle.net/a0bhv4n1/

источник

2016-03-15 Rick Joe

Ссылки на изображение не работают для меня в jfiddle, но я бы взял все, что удерживает изображение, и получим его как «display: inline-block; position: relative; 'и текст, который вы хотите перед изображением, как' position: absolute; 'и посмотреть, что это для вас делает. – JoeL

Чтобы добавить к этому, выравнивание по вертикали применяется только к элементам inline и table-cell, а div по умолчанию не является строковым (по умолчанию это элемент блока). Поэтому, если то, что я предложил, не работает точно с точки зрения относительной позиции для одного и абсолютного положения для другого, добавляя display: inline-block; для вертикального выравнивания необходимо что-либо сделать. – JoeL

Об этом было задано и ответили ранее: http://stackoverflow.com/q/4753678/407456 – elboletaire

Вертикальные выравнивания работает на встроенных элементов. Вы применяете его к классу .comment-text, который предназначен для элемента div. Элемент div является элементом стиля блока, который, конечно, означает, что он займет все пространство, которое ему разрешено, таким образом, вы не можете центрировать то, что уже занимает все пространство. Встроенные элементы занимают только пространство, в котором они нуждаются, на основе содержимого в них, и вы можете просто добавить display:inline-block в .comment-text, чтобы разрешить работу vertical-align:middle. Более подробную информацию можно найти по адресу MDN's article on vertical-align

источник

2016-03-15 20:59:38 JoeL

вертикальное выравнивание среднее не работает

ответ

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