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

Question

在语义 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，我不知道如何将项目内容垂直居中。

有什么建议吗？

编辑： 最简单的解决方案是回答问题 "How do you force a line-break between an icon and text in the item?"

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>

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

Vertically center content inside a Semantic UI menu

css

alignment

semantic-ui