Semantik UI ortalanmış sıvı olmayan menü?

Question

İki menüm var, biri dibe ve diğerine sabitleniyor. Benim problemim iki kat. Ekranın ortasında görünmelerini ve sadece içeriğinin genişliğini (varsayılan olarak sıvı olmak yerine) göstermelerini istiyorum.

Bunun mümkün olduğunu belirtmek için dokümantasyonda hiçbir şey bulamadım, bu yüzden muhtemelen çözüm CSS ile değiştirmek mi?

Herhangi bir yardım büyük memnuniyetle karşılanacaktır.

Answer 1

İçeriği ayarlamak için UI menüleriniz için semantik UI sınıfını "compact" ("kompakt") kullanın ve ardından orta hizalama için ızgaraları ve sütunları kullanın. Yani örneğin:

<div class="ui centered grid"> 
    <div class="center aligned column"> 
     <div class="ui compact menu"> 
      <a class="active item"> 
      <i class="home icon"></i> Home 
      </a> 
      <a class="item"> 
      <i class="mail icon"></i> Messages 
      </a> 
     </div>   
    </div> 
</div> 

JSFiddle Bağlantı:

<div class="ui center aligned container"> 
    <div class="ui compact menu"> 
     <a class="active item"> 
      <i class="home icon"></i> Home 
     </a> 
     <a class="item"> 
      <i class="mail icon"></i> Messages 
     </a> 
    </div>   
</div> 

JSFiddle Bağlantı:: Ayrıca sadece bir merkez hizalanmış bir kap kullanabilirsiniz http://jsfiddle.net/pLskpufp/2/

Answer 2

http://jsfiddle.net/377v6ect/1/

Answer 3

Ben bir değil biliyorum semantik UI çözümü, ancak Semantic UI'de sabit bir menü ile bunu yapmak için bir yol arayanlar için, en iyi çözüm Şimdiye kadar biraz özel CSS ile bir div içinde sarmak için. Bu css ile birlikte

<div className="fixed bottom"> 
    <div className="ui centered grid"> 
    <div className="center aligned column"> 
     <!-- Your Semantic UI menu here, but not fixed. --> 
    </div> 
    </div> 
</div> 

...

div.fixed { 
    width: 100%; 
    position: fixed; 
} 
div.fixed.bottom { 
    bottom: 0; 
} 
div.fixed.top { 
    top: 0; 
}