css - 段中垂直对齐的内容(语义 UI)

Question

有没有办法将段类 div 中的内容垂直居中？我有以下标记:

<div class="stretched row">
  <div class="two wide column">
    <div class="ui basic segment">
      <select>
        <!-- OPTION VALUES IN HERE -->
      </select>
    </div>
  </div>
  <div class="column">
    <div class="ui basic segment>
     <!-- DIV CONTENT -->
    </div>
  </div>
  <div class="column">
    <div class="ui basic segment">
      <!-- DIV CONTENT -->
    </div>
  </div>

现在，由于 stretched row 类，所有 3 列都具有相同的高度，它们内部的段 div 也是如此，如下所示:

我希望 3 个段内的内容在它们内部垂直居中。相反，它们总是出现在顶部。我试过添加 class="ui middle aligned basic segment" 但它不起作用。将 class="middle aligned column" 添加到父列中，使段在其中居中，但它们不会占用列的所有垂直空间，并且由于它们具有边框和彩色背景，因此看起来很奇怪(每个部分都有自己的高度)。

我想避免在段中添加填充，因为我不知道它们的高度并且它的内容从 1 行(一个选择)到几行文本(从 2 到 7 行，取决于用户选择的内容)。

谢谢!

Answer 1

正如@VXp 建议的那样，应用 {display: flex; align-items: center 到 segment 类的效果很好。