Содержание вертикального центра внутри меню семантического пользовательского интерфейса

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, я не могу понять, как вертикально центрировать содержимое элемента.

Любые советы?

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>