Trying to style a row of buttons on the left, a center-aligned navigation list, and another row of buttons on the right. The navigation buttons are grouped to account for layout changes. How can I horizontally center the navigation within the parent element?
Both the parent divs and navigation are set to "display: inline".
Is absolute positioning necessary for the navigation to be centered? Why?
What's the best way to horizontally center the navigation?
Snippet of my HTML:
// Ensure font smoothing for crisp lines
html{
background-color: rgb(235, 235, 235);
}
#main_body{
width: 1200px;
margin: auto;
background-color: white;
}
// Styling for the first row header
#header_topnav{
width: 96%;
height: fit-content;
}
// Styling for buttons, navigation, and buttons
.topnav_button{
width: 45px;
height: 35px;
margin-top: 18px;
margin-bottom: 10px;
}
// Make div inline to align on the same line
#left_buttons{
display: inline;
position: relative;
}
// Make div inline to align with the buttons
// Align using left or margin
#right_buttons{
display: inline;
position: relative;
margin-left: 87.5%;
// left: 86.5%;
}
// Vertical centering
ul {
margin: auto;
}
// Styling for horizontal nav menu
li {
display: inline;
float: left;
margin-left: 10px;
}
// Create a larger clickable area
li a {
display: block;
}
// How to horizontally center this?
// Is absolute positioning necessary? Can it be centered between button sections without that?
#top_navmenu {
position: absolute;
display: inline;
margin-top: 28px;
}<div id="main_body">
<header>
<section id="header_topnav">
<div id="left_buttons">
<button class="topnav_button"></button>
<button class="topnav_button"></button>
</div>
<nav id="top_navmenu">
<ul>
<li><a>F+</a></li>
<li><a>POLITIK</a></li>
</ul>
</nav>
<div id="right_buttons">
<button class="topnav_button"></button>
</div>
</section>
</header>
</div>