div中的垂直对齐图像和文本

Question

我有一个包含图像和文本的父div，它们应该垂直对齐：中间，但我不能让它工作。不确定我做错了什么。

在下面找我的小提琴

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中预览代码时得到的结果：

Answer 1

如果您使用display: inline-block并在容器div上使用vertical-align: middle，则内容将垂直对齐。

Fiddle Here

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

修改：Fiddle using table-cell instead

编辑：Fiddle with valid image files

Answer 2

您不需要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/