使用CSS将图片垂直居中对齐到一个div中。

Question

我需要帮忙，将不同大小的图片垂直居中对齐在一个容器div中。我做了一张图片，您可以看到这个div（灰色背景）和图片应该在中间对齐。

如您所见，如果图片尺寸不同，它们看起来就不协调。我该如何将所有图片垂直居中对齐，使它们在一行内？

我不确定是否可以使用position: absolute，因为我仍然希望图片自适应大小（height: auto & width: 100%）。

Html：

<div class="window column border small-12 medium-6 large-4 xlarge-3" *ngFor="#item of items">
            <div class="row">
                <div class="item-group">
                    <span>Fri fragt!</span>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">
                    <div class="item-imagegroup">
                        <img src={{item.Image}} title="" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">
                    <div class="item-descriptiongroup">
                        <div class="item-header">{{item.Header}}</div>
                        <div class="item-description">{{item.Description}}</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">

                </div>
            </div>
            <div class="row">
                <div class="column small-6">

                </div>
                <div class="column small-6">

                </div>
            </div>
        </div>

CSS：

.item-imagegroup {
    text-align: center;
    padding-top: 1rem;
    height: 350px;
    background-color: grey;
    vertical-align: middle; 
}

.item-imagegroup img {
    width: 100%;
    height: auto;
}

.item-image {
    margin-top: 1rem;
    margin-bottom: 1rem;     
}

已经将div设置为固定的，所以下面的文本也会对齐。不确定这里是否有更好的解决方案。

希望有人能给我一些建议。

- Mikkel

Answer 1

你可以尝试

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

假设您不需要遗留支持，这应该可以正常工作。

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

- Dave

Answer 2

vertical-align仅适用于表格。尝试创建一个包裹div并给它“display：table;”，然后将img包裹的div设置为：“display：table-cell”。

不要忘记将所有内容设置为100％的宽度和高度。

编辑：

HTML：

<div class="item-imagegroup">
    <div class="item-tablecell">
        <img src={{item.Image}} title="" />
    </div>
</div>

CSS：

.item-imagegroup {
    display: table;
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    height: 350px;
    background-color: grey;
}

.item-tablecell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

- Shon Levi

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Mikkel

谢谢你的帮助，伙计。非常感激。 - Mikkel