Il menu a discesa Bootstrap 3 centrerà l’allineamento non funzionante

Non riesco ad allineare il menu a discesa al centro del genitore su cui è aperto il menu a discesa con passaggio del mouse. Ho provato ad allineare il testo: centro per gli interi elementi .nav .navbar li, e non funziona. Ho provato a impostare il margine e a sinistra: 50% per l’intero menu ul.dropdown che è il menu a discesa e non funziona. Ecco il codice html:

 

In quale class menu a tendina, o nav navbar-nav, dovrei fare l’aligment e cosa dovrei impostare?

Puoi utilizzare la trasformazione per evitare di dover utilizzare larghezze fisse:

 .dropdown-menu { left: 50%; right: auto; text-align: center; transform: translate(-50%, 0); } 

Risposta influenzata da http://css-tricks.com/centering-percentage-widthheight-elements/

Puoi farlo finché sei disposto a dare al dropdown ul una larghezza fissa. Vedi il codice qui sotto:

 .dropdown{text-align:center;} .button, .dropdown-menu{margin:10px auto} .dropdown-menu{width:200px; left:50%; margin-left:-100px;} 

Le prime 2 dichiarazioni sono a scopo di visualizzazione, ma la parte importante è la terza linea. Dovrai definire una larghezza (in questo caso 200px) e quindi un margin-left uguale alla metà della larghezza. Funzionerà con qualsiasi larghezza, indipendentemente dal fatto che il pulsante sia a destra, a sinistra o tra gli elementi (ma ovviamente avrai probabilmente bisogno di spazio per l’elemento button )

Puoi vedere un violino qui

L’unico, brutto modo è quello di impostare la posizione in base alle tue esigenze come:

 .dropdown-menu{ right: -25px !important; } 

Violino

Ma non è il modo in cui dovrebbe essere usato. Ricordare che è necessario regolare le impostazioni per tutti i dispositivi multimediali.