Question

Hello Stack Overflowers，我无法弄清楚如何垂直对齐不同大小的图像并将它们保持在一行中？所有这些都应该在一行中，第3列应该具有与第1列或第2列相同的高度。

＆＃13;

body {
  width: 80%;
  margin: 0 auto;
}

p {
  text-align: justify;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet"/>
<div class="ui stackable three column grid">

  <div class="column">
    <div class="ui center aligned segment">
      <div class="ui small image">
        <img src="http://placehold.it/200" alt="" />
      </div><!-- image -->
      <h2 class="ui center aligned header"><i class="code icon"></i></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate lacus vitae malesuada porttitor. Vivamus commodo eleifend faucibus. Vestibulum a quam aliquam, euismod tellus eget, malesuada tellus.
        </p>
    </div><!-- segment -->
  </div><!-- column 1 -->

  <div class="column">
    <div class="ui center aligned segment">
      <div class="ui small image">
        <img src="http://placehold.it/200" alt="" />
      </div><!-- image -->
      <h2 class="ui center aligned header"><i class="cloud icon"></i></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate lacus vitae malesuada porttitor. Vivamus commodo eleifend faucibus. Vestibulum a quam aliquam, euismod tellus eget, malesuada tellus.
        </p>
    </div><!-- segment -->
  </div><!-- column 2 -->
  
  <div class="column">
    <div class="ui center aligned segment">
      <div class="ui small image">
        <img src="http://placehold.it/200x100" alt="" />
      </div><!-- image -->
      <h2 class="ui center aligned header"><i class="hashtag icon"></i></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate lacus vitae malesuada porttitor. Vivamus commodo eleifend faucibus. Vestibulum a quam aliquam, euismod tellus eget, malesuada tellus.
        </p>
    </div><!-- segment -->
  </div><!-- column 3 -->
</div>

＆＃13;

Answer 1

试试这个。 JS小提琴：https://jsfiddle.net/batrasoe/e8yb99ha/

我们将图像的父div设置为集合中的最高图像。这将使列的高度相等。

.ui.small.image {

  height: 200px; /*Max Possible Height of the image */
}

接下来，为了使图像居中，我们使用以下CSS：

  .ui.small.image > img {

        position: absolute;  
        max-height: 100%;  
        max-width: 100%; 
        width: auto;
        height: auto;    
        top: 0;  /*Centering the image*/
        bottom: 0;    /*Centering the image*/
        left: 0;   /*Centering the image*/
        right: 0;   /*Centering the image*/
        margin: auto;
    }

如何使用语义UI垂直对齐不同大小的图像

1 个答案: