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次，但它将是一排不同的徽标，所有徽标都有不同的高度和宽度。任何人都可以提出我可以尝试的建议吗？

Answer 1

尝试显示：table-cell; with vertical-align：middle;

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

Answer 2

我认为这就是你之后的事情 - 我已经删除了每张图片的个人div，并将treatments-logo类作为容器。

<强> HTML

<div class="treatments-logo">
    <a href="#">
        <img src="https://dl.dropboxusercontent.com/u/37491564/nouveau-logo.png" alt="nouveau logo"/>
    </a>
    <a href="#">
        <img src="https://dl.dropboxusercontent.com/u/37491564/nouveau-logo.png" alt="nouveau logo"/>
    </a>
    <a href="#">
        <img src="https://dl.dropboxusercontent.com/u/37491564/nouveau-logo.png" alt="nouveau logo"/>
    </a>
</div>

然后我将这两个CSS类更改为：

<强> CSS

.treatments-logo {
    height: 60px;
    margin: 0 auto;
    text-align: center;
}
.treatments-logo img {
    display: inline-block;
}

这里是小提琴：http://jsfiddle.net/6jGTW/

希望这有帮助！

div行中的图像对齐

2 个答案: