Question

如果卡片视图中的图像高度不相等，有没有办法将图像垂直居中？

for i in range(questions): #ask 10 questions
    score += quiz()

我还使用JS将<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>置于同等高度。 Here是Fiddle。

Answer 1

通过你的jsfiddle例子我做了一些改变。

改变了什么：

img

class="ui image"

已删除
equalheight('.ui.card div.image');之后我添加了更多javascript代码

js代码首先找到其类divs中的所有cards代码。然后，搜索img内的所有divs标记。

然后计算height标记及其父img的{{1}}除以2并减去div img位置。

完成计算后，在top投放，添加img

jsfiddle example

我认为，如果您可以从maring-top:*calculation*px删除class，这是可以的。

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

Answer 2

我没有看过你的代码，但有一种方法可以将翻译中的内容集中在这里：

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

这里有一个我用中心水平和垂直

制作的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/

在js中调整图像大小是一个很滑的斜率

虽然小心那个

你也不必在图像中嵌套ui图像

http://jsfiddle.net/gabgwrtt/

并调整大小..

http://jsfiddle.net/vgq6vec2/

卡内的垂直居中图像

3 个答案:

HTML：

CSS：

JS：

他对jsfiddle链接的完整答案：