セマンティックUIメニュー内のコンテンツを中心に配置

Question

jsfiddle hereを参照してください。

セマンティック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とすると、アイテムのコンテンツを垂直方向に中央に配置する方法がわかりません。

アドバイスはありますか？

EDIT：最も簡単な解決策は、質問に答えることであろう、「あなたはどのようにアイテムのアイコンとテキストの間に改行を強制するのですか？」

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>