在语义 UI 菜单中垂直居中内容

Question

请参阅此处的 jsfiddle。

在语义 UI 中，如何创建具有 (a) 垂直居中的项目和 (b) 项目内图标和文本之间的垂直中断的水平菜单？

这段代码...

<div class="ui icon menu">
    <div class="item">
        <div style="width:100px;height:100px;background:#f00"></div>
    </div>
    <div class="item">
        I want this<br>vertically centered
    </div>
    <div class="item">
        <i class="huge blue settings icon"></i>
        I want these<br>beneath the icon
    </div>
    <div class="item">
        <i class="huge blue power icon"></i>
        ... and centered<br>vertically
    </div>
</div>

……接近了。以下是添加labeled到菜单之前和之后发生的情况。

没有labeled我无法弄清楚如何移动图像下方的文本。

使用labeled，我无法弄清楚如何垂直居中项目内容。

有什么建议吗？

编辑：最简单的解决方案是回答“如何在项目中的图标和文本之间强制换行？”的问题。

Answer 1

如果不更改 HTML 和 CSS 代码，您就无法做到这一点。

.item {
  background-color: #aa8 !important;
}

.item div {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui labeled icon menu">
  <div class="item">
    <div style="width:100px;height:100px;background:#f00"></div>
  </div>
  <div class="item">
    <div>
      I want this
      <br>vertically centered
    </div>
  </div>
  <div class="item">
    <div>
      <i class="huge blue settings icon"></i> I want these
      <br>beneath the icon
    </div>
  </div>
  <div class="item">
    <div> <i class="huge grey power icon"></i> ... and centered
      <br>vertically
    </div>
  </div>
</div>