html - 卡片内垂直居中的图像

Question

如果图像高度不相等，是否有办法在卡片 View 中将图像垂直居中？

<div class="ui three cards">
    <div class="ui card">
        <div class="image">
            <img class="ui image" src="https://dl.dropboxusercontent.com/u/2438119/demo_products/1/aparat1.jpg">
</div>
        <div class="content">Lorem ipsum dolor sit.</div>
    </div>

    <div class="ui card">
        <div class="image">
            <img class="ui image" src="https://dl.dropboxusercontent.com/u/2438119/demo_products/2/aparat2.jpg">
</div>
        <div class="content">Lorem ipsum dolor sit.</div>
    </div>

    <div class="ui card">
        <div class="image">
            <img class="ui image" src="https://dl.dropboxusercontent.com/u/2438119/demo_products/3/aparat3.jpg">
</div>
        <div class="content">Lorem ipsum dolor sit.</div>
    </div>
</div>

我还用JS把div.img等高了。 Here是我的Fiddle .

Answer 1

通过您的 jsfiddle 示例，我做了一些更改。

改变了什么:

1. 从每个 img class="ui image" 中删除
2. 在 equalheight('.ui.card div.image'); 之后我放了更多 javascript 代码

js 代码首先找到所有 div，它们在类中有 cards。然后，搜索 divs 中的所有 img 标签。

然后计算img标签及其父div的height，除以2减去img top 位置。

计算完成后，在img中添加maring-top:*calculation*px

有 jsfiddle example

在我看来，如果您可以从 img 中删除 class 就可以了。

我希望这就是您所需要的。