将语义UI菜单中的内容垂直居中

Question

请参阅jsfiddle here。

在语义用户界面中，如何使用（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，我无法弄清楚如何垂直居中项目内容。

有什么建议吗？

编辑：最简单的解决方案是回答问题＆＃34;如何在项目中的图标和文字之间强制换行？＆＃34;

Answer 1

抱歉，但是没有更改html就无法做到。

.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>