Semantic UI菜單中的垂直中心內容

請參閱jsfiddle here。Semantic UI菜單中的垂直中心內容

在語義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，我無法弄清楚如何垂直居中項目內容。

有什麼建議嗎？

編輯：最簡單的解決方案是回答「如何強制項目中的圖標和文本之間的換行符？」問題。

來源

2017-02-19 neokio

使用框架，然後勇敢地克服由此產生的問題......你有中斷語義的風格。你應該使用'！important'或者放棄典型的類名稱，比如'item' –

哈哈絕對是真的......雖然有了語義UI，開發者往往會添加未公開的解決方法（比如在'item'內添加'content' div）這改變了行爲......我想我不希望我不是第一個想在菜單下的圖標文本:) – neokio

你能推薦一個通用的解決方案 - 不使用框架））） –

對不起，但沒有更改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>

來源

2017-02-19 10:40:34

片段看起來與我的第一個示例（「沒有標記的類」）相同。就像這個例子，它是垂直居中的，但圖標仍然在文本的左邊。我如何推動圖標下方的文字？ – neokio

不明白。有沒有辦法？ –

@neokio我改變了我的答案 –

Semantic UI菜單中的垂直中心內容

回答

相關問題