0
295
Views¿Cómo centrar div debajo de otro elemento, no div principal?
Aquí hay una imagen que muestra lo que estoy tratando de lograr:
Como puede ver, estoy tratando de que el menú desplegable de opciones de perfil esté centrado debajo del botón de perfil. La forma actual en que lo tengo configurado es hacer que el menú desplegable tenga position: absolute , y luego usar un margin-left: -3% para "centrarlo", pero creo que debería haber una forma más confiable de hacerlo. céntrelo que no depende de un valor de porcentaje codificado. A continuación se muestra el código correspondiente:
índice.php:
<div id="navTools"> <button id="navProfile"><img src="./imgs/profile.svg" alt="Profile"/></button> <div id="profileDropdown"> <a href="#example">Account Information</a> <a href="#example">Orders & Returns</a> <a href="./logout.php">Logout</a> </div> <a id="navCart" href="cart.php"><img src="./imgs/cart.svg" alt="Cart"/></a> </div>estilos.css
#profileDropdown { display: none; background: #1d1d1d; position: fixed; margin-left: -3%; }1 answers
Answer question0
Envuelva el botón de perfil y el menú desplegable de perfil en un div. Dé esa position: relative y establezca la position: absolute para el menú desplegable. Si desea que aparezca en la parte inferior, configure bottom: 0 . Si desea centrarlo verticalmente, ajuste a la left: 50%, transform: translateX(-50%) .
<div id="navTools"> <div class="dropdown-wrapper"> <button id="navProfile"><img src="./imgs/profile.svg" alt="Profile"/></button> <div id="profileDropdown"> <a href="#example">Account Information</a> <a href="#example">Orders & Returns</a> <a href="./logout.php">Logout</a> </div> </div> <a id="navCart" href="cart.php"><img src="./imgs/cart.svg" alt="Cart"/></a> .dropdown-wrapper { position: relative; } #profileDropdown { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }