Question

我可以使用一些帮助，在容器div的中间对齐图像（不同的大小）。制作了一张照片，你可以看到div（灰色背景），图像应该在中间对齐。

如您所见，如果图像尺寸不同，则看起来不太好看。如何对齐中间的所有图像（垂直）以使它们内联？

我不确定我是否可以使用position：absolute因为我仍然希望图像自身调整大小（高度：自动和宽度：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固定，因此下面的文本也将对齐。不确定这里是否有更好的解决方案。

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

Answer 1

vertical-align仅适用于表格尝试制作一个包装div并给它＆＃34; display：table;＆＃34; 以及包装img的div：＆＃34; display：table-cell＆＃34;

别忘了把它全部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%;
}

Answer 2

你可以尝试

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

这应该有效，假设您没有寻找遗留支持。

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

使用css将div的中间（垂直）对齐图像

2 个答案: