How can I align the dropdown content to the center in its td element? I haven't included all of my code here, so feel free to ask if you need more information. The search bar is supposed to be at the center of this table navbar.
This is the HTML:
<table class="navbar-table">
<tr>
<td style= "margin: 0px 0px; padding: 0px 0px; width:33.33%; float: left;">
<div class="dropdown">
<span class="dropbtn">☰ Menu</span>
<div class="dropdown-content">
<a href="../index.html">Home</a>
<a href="../leaderboard.html">Leaderboard</a>
<a href="../about_us.html">About Us</a>
<a class="active" href="slide1.html">Slides</a>
<a style=" display: none;" id= "profile-button-text" href= "../profile/achievements.html" >Profile</a>
<a style= "background-color: #ab727a; display: none;" id= "logout-button-text">Log Out</a>
</div>
</div>
</td>
<td class= "search_bar_td">
<div class="dropdown-search">
<input autocomplete="off" class= "search_bar" name="search" placeholder="Search..">
<div class="dropdown-search-content">
<a href="../index.html">Home</a>
<a href="../leaderboard.html">Leaderboard</a>
<a href="../about_us.html">About Us</a>
<a class="active" href="slide1.html">Slides</a>
<a style=" display: none;" id= "profile-button-text" href= "../profile/achievements.html" >Profile</a>
<a style= "background-color: #ab727a; display: none;" id= "logout-button-text">Log Out</a>
</div>
</div>
</td>
<td style= "margin: 0px 0px; padding: 0px 0px; width:33.33%;">
<ul style= "margin: 0px 0px; padding: 0px 0px;">
<li class="navbar-logsin" id= "signup-button" style=" background-color: #72ab99">
<a class= "topnav_a" id= "signup-button-text">Sign Up</a>
</li>
<li class="navbar-logsin" id= "login-button" style=" background-color: #73a872">
<a class= "topnav_a" id= "login-button-text">Login</a>
</li>
</ul>
</td>
</tr>
</table>
This is the CSS:
.search_bar {
width: 240px;
float: none;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 6px 10px 6px 30px;
margin: 0 auto;
outline: none;
}
.search_bar_td {
float: center;
width: 33.33%;
margin: 6px 0px;
padding: 0px 0px;
}
.dropdown-search {
width:100%;
margin:0 auto;
padding: 0px 0px;
float: center;
display:block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
}
.dropdown-search-content {
display: block;
position: absolute;
background-color: #f9f9f9;
height: 0px;
width: 0px;
max-height:150px;
overflow-y:scroll;
z-index: 1;
float: center;
margin: 6px 0px;
}
.search_bar:focus + .dropdown-search-content {
height: auto;
width: 240px;
}