вертикальное выравнивание изображения и текста в div

У меня есть родительский div, который включает изображение и текст, и они должны быть выровнены по вертикали: посредине, хотя я не могу заставить его работать. Не знаю, что я сделал не так.вертикальное выравнивание изображения и текста в div

Найти ниже моей Fiddle

jsfiddle

HTML

<div class="social-cont"> 
    <div class="social-cont1"> 
     <img src="img/contact1.png" alt="contact1" width="21" height="30" /> 
    </div> <!-- end social-cont1 --> 
    <div class="social-cont2"> 
     <h6 class="social-context">Pastoor de Leijerstraat 29, 5246JA, Hintham</h6> 
    </div> <!-- end social-cont1 --> 

</div> <!-- end social-cont --> 

<div class="social-cont"> 
    <div class="social-cont1"> 
     <img src="img/contact3.png" alt="contact3" width="23" height="24" /> 
    </div> <!-- end social-cont1 --> 
    <div class="social-cont2"> 
     <h6 class="social-context">XXXXXXXXXXXXXX</h6> 
    </div> <!-- end social-cont1 --> 
</div> <!-- end social-cont -->

CSS

.social-cont { 
    height: 100%; 
    width: 350px; 
    border-bottom: 1px solid #c1c1c1; 
    display: table; 
    background-color: salmon; 
} 

.social-cont1 img { 
    display: table-cell; 
    vertical-align: middle; 
    float: left; 
} 

h6.social-context { 
    display: table-cell; 
    vertical-align: middle; 
    color: #404040; 
    float: left; 
}

Это то, что я получаю при просмотре кода в Coda:

источник

2014-01-29 user3231901

Ваше сообщение не заполнено. Пожалуйста, внесите предварительный просмотр Coda. –

Вставьте код из этого jsFiddle, как говорят правила. – crush

'vertical-align' не работает на элементах уровня блока. Вы разместили свой элемент изображения, что заставляет его блокировать уровень. Прочтите мой [ответ здесь] (http://stackoverflow.com/questions/21418400/unwanted-space-in-div-tags/21418418#answer-21418418), чтобы лучше понять, как работает 'vertical-align'. – crush

Если вы используете display: inline-block и используете vertical-align: middle на своих контейнерах div, то котенок будет правильно выровнен по вертикали.

Fiddle Here

.social-cont2, 
.social-cont1{display: inline-block; vertical-align: middle;}

Edit: Fiddle using table-cell instead

источник

2014-01-29 13:50:58

Что делать, если он хочет использовать 'table-cell' для' display'? – crush

@crush (s) он мог бы, конечно, изменить 'display: inline-block;' to 'display: table-cell;', если важно, чтобы содержимое отображалось как табличные данные. В этом случае, тем не менее, наличие 'display: table-cell' и' vertical-align: middle' в divs '.social-cont1 img' и' h6.social-context' является избыточным. –

Вам не нужно float: left и на самом деле вам не нужно .social-cont1 и .social-cont2, вы можете стиль img и h6

.social-cont1 { 
    display: table-cell; 
    vertical-align: middle; 
} 

.social-cont2 { 
    display: table-cell; 
    vertical-align: middle; 
    color: #404040; 
}

http://jsfiddle.net/fwshE/3/

источник

2014-01-29 13:52:18 Naele

вертикальное выравнивание изображения и текста в div

ответ

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