0
288
ViewsHow to center div below other element, not parent div?
Here's an image showing what I'm trying to achieve:
As you can see, I'm trying to get the profile options dropdown to be centered below the profile button. The current way I have it set up is to have the dropdown menu have position: absolute, and then use a margin-left: -3% to actually "center" it, but I feel like there should be a more reliable way to actually center it that isn't dependent on a hardcoded percentage value. Below is the relevant code:
index.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>
styles.css
#profileDropdown {
display: none;
background: #1d1d1d;
position: fixed;
margin-left: -3%;
}
·
Juan Pablo Isaza
1 answers
Answer question0
Wrap profile button and profile dropdown in a div. Give that div position: relative and set position: absolute for the dropdown. If you want it to appear at the bottom, set bottom: 0. If you want to center it vertically, set 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%);
}
·
Juan Pablo Isaza
Report
Answer question