html - ejemplos - centrar navbar

Bootstrap 3 menú desplegable centro alinear no funciona

Question

No puedo alinear el menú desplegable con el centro del padre en el que se abre el menú desplegable con el cursor. He intentado alinear el texto: centrar para todos los elementos .nav .navbar li, y no funciona. Intenté establecer el margen y me fui: 50% para todo el menú desplegable de ul.que es el menú desplegable y no funciona. Aquí está el código html:

<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
                        <li><div class="btn-toolbar">
                            <div class="btn-group">
                                <button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
                                <ul class="dropdown-menu">
                                    <li><a tabindex="-1" href="#">Made in the USA</a></li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">Human Grade</a></li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">USDA Meats</a></li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">Our Story</a></li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">Campare</a></li>
                                </ul>
                            </div>
                        </li>
</ul>

¿En qué clase de menú desplegable, o nav nav-nav, debo hacer la alineación y qué debo configurar?

Answer 1

La única forma fea es establecer la posición según sus necesidades, como:

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

Fiddle

Pero no es la forma en que se debe utilizar. Tenga en cuenta que debe ajustar la configuración para todos los dispositivos multimedia.

Answer 2

Puede hacer esto siempre y cuando esté dispuesto a dar a la lista desplegable un ancho fijo. Ver código a continuación:

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

Las primeras 2 declaraciones son para fines de visualización, pero la parte importante es la tercera línea. Tendrá que definir un ancho (en este caso 200px) y luego un margin-left igual a la mitad del ancho. Esto funcionará con cualquier ancho, sin importar si el botón está a la derecha, a la izquierda o entre los elementos (pero, por supuesto, probablemente necesitará algo de espacio para el elemento del button )

Puedes ver un violín aquí

Answer 3

Puedes usar la transformación para evitar tener que usar anchos fijos:

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

Respuesta influenciada por http://css-tricks.com/centering-percentage-widthheight-elements/