卡片内垂直居中的图像

Question

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

<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 is my Fiddle.

Answer 1

根据您的 jsfiddle 示例，我做了一些更改。

改变了什么：

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

js 代码首先找到所有 divs 的 class cards。然后，在 divs.

中搜索所有 img 标签

然后计算img标签和他的父标签div的height，除以2减去imgtop的位置。

经过计算，在img中加上maring-top:*calculation*px

有jsfiddle example

我认为这没问题，如果您可以从 img 中删除 class。

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

Answer 2

我没有看过你的代码，但有一种方法可以像这样通过翻译将内容居中：

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

这是我用水平和垂直居中 bort 制作的 jsfiddle

http://jsfiddle.net/acmg1h05/1/

Answer 3

我选择了这个解决方案，因为它不涉及复杂的 JS（由一位 SemanticORG 成员 - Jack Lukic 回答）：

HTML:

<div class="ui three cards">
  <div class="ui card">
    <div class="image">
      <img 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 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  src="https://dl.dropboxusercontent.com/u/2438119/demo_products/3/aparat3.jpg">
    </div>
    <div class="content">Lorem ipsum dolor sit.</div>
  </div>
</div>

CSS:

.ui.card .image {
  display: flex !important;
  align-items: center !important;
  padding: 0 1em !important;
  background-color: #fff !important;
}

JS:

equalheight = function(container){
    var currentTallest = 0,
            currentRowStart = 0,
            rowDivs = new Array(),
            $el,
            topPosition = 0;

    $(container).each(function() {
        $el = $(this);
        $($el).height('auto')
        topPostion = $el.position().top;

        if (currentRowStart != topPostion) {
            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
            rowDivs.length = 0; // empty the array
            currentRowStart = topPostion;
            currentTallest = $el.height();
            rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }
    });
}

$(document).ready(function() {
    equalheight('.ui.card div.image');
    $(window).on('resize', function() {
        equalheight('.ui.card div.image')
    });
});

他带有 jsfiddle 链接的完整答案：

http://jsfiddle.net/1qaepk4n/

Sizing images in js is a slippery slope

though be careful with that

you also dont have to nest ui image in image

http://jsfiddle.net/gabgwrtt/

And with resize..

http://jsfiddle.net/vgq6vec2/

卡片内垂直居中的图像

Vertically centered images inside card

html

css

image

semantic-ui

HTML:

CSS:

JS:

他带有 jsfiddle 链接的完整答案：