css - 一行div内的图像对齐

Question

我有一排 div，我希望图像在垂直和水平方向居中。

<div id="treatments-wrapper">
                <div class="heading">
                    <h2>Our Treatments</h2>
                </div>
                <div class="treatments-logo">
                    <a href="#"><img src="img/nouveau-logo.png" alt="nouveau logo"></a>
                </div>
                <div class="treatments-logo">
                    <a href="#"><img src="img/nouveau-logo.png" alt="nouveau logo"></a>
                </div>
                <div class="treatments-logo">
                    <a href="#"><img src="img/nouveau-logo.png" alt="nouveau logo"></a>
                </div>
            </div><!--treatments-wrapper-->




 #treatments-wrapper {
    width:960px;
    height:100px;
    float: left;
    margin: 10px 0;
    border-bottom: #373839 solid 10px;
}

.treatments-logo {
    width: auto;
    height: 60px;
    float: left;
    margin: 0 8px;
}

.treatments-logo img {
    display: block;
    margin: auto;
}

.heading {
    width:960px;
    height: 40px;
    background-color: #373839;
    float: left;
    margin:
}

这里是jsfiddle

在这个例子中，我使用了同一张图片 3 次，但它将是一排不同的 Logo ，所有 Logo 的高度和宽度都不同。谁能建议我尝试一下？

Answer 1

尝试显示:表格单元格；垂直对齐:中间；

.treatments-logo {
    width: 1%;
    display:table-cell;
    height: 60px;
    vertical-align:middle;
}