在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并使用vertical-align: middle在容器div的vertical-align: middle ，则内容将正确地垂直对齐。

小提琴在这里

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

编辑： 改用表格单元格

编辑： 摆弄有效的图像文件

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/