Menu non fluido centrato sulla UI semantica?

Question

Ho due menu, uno è fissato in basso e l'altro è fisso in alto. Il mio problema è duplice. Voglio che appaiano al centro dello schermo e siano solo la larghezza del loro contenuto (invece di essere fluido, come per impostazione predefinita).

Non ho trovato nulla nella documentazione per indicare che questo è possibile, quindi presumibilmente la soluzione è modificarlo con CSS?

Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Utilizzare la classe semantica ui "compatta" per i menu dell'interfaccia utente per adattarsi al contenuto, quindi utilizzare griglie e colonne per l'allineamento del centro. Così, per esempio:

<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 Link: http://jsfiddle.net/pLskpufp/2/

Answer 2

È anche possibile utilizzare un centro di container allineato:

<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 Link: http://jsfiddle.net/377v6ect/1/

Answer 3

io so che non è un pura soluzione Semist UI, ma per quelli di voi che cercano un modo per farlo con un menu fisso nell'interfaccia utente Semantic, la soluzione migliore che ho nd finora è quello di avvolgerlo in un div con un piccolo CSS personalizzato.

<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> 

Insieme a questo css ...

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