2017-02-19 10 views
0

jsfiddle hereを参照してください。セマンティック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を追加する前後の状態です。

enter image description here

labeledがなければ、私は、画像の下にテキストを移動する方法を見つけ出すことはできません。

labeledとすると、アイテムのコンテンツを垂直方向に中央に配置する方法がわかりません。

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

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

+0

使用のフレームワーク、そして勇敢に生じる問題を克服するためには...あなたが持っている意味的なスタイルを中断する。 '!important'を使うか、' item'のような典型的なクラス名を捨てるべきです –

+0

Lol絶対に真ですが...セマンティックUIでは多くの場合、開発者は文書化されていない回避策を追加します。それは行動を変える...私は私がメニューのアイコンの下のテキストを最初にしたくないと思うと思う:) – neokio

+0

普遍的な解決策をお勧めできますか - フレームワークを使用しないでください)))) –

答えて

2

申し訳ありませんが、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>

+0

スニペットは私の最初の例(「ラベル付きクラスなし」)と同じように見えます。 例のように、垂直方向に中央に配置されていますが、アイコンはテキストの左側にあります。テキストをアイコンの下にどのようにプッシュしますか? – neokio

+0

は分かりません。方法はありますか? –

+0

@neokio私は私の答えを変える –

関連する問題