Bootstrap 5 - center search box in navigation - html

Question

I am using bootstrap 5 and would like to center the search box in the navigation.
I tried the following:
#the-basics {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.0/font/bootstrap-icons.css">
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
LOGO
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Product</li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<div id="the-basics">
<div class="input-group">
<input name="searchField" id="searchField" type="search" class="form-control form-control-dark" style="width: 426px; " placeholder="Search for news, symbols, tickers or companies">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
</div>
</div>
</form>
<div class="text-end">
<!-- <button type="button" class="btn btn-outline-light me-2">Login</button> -->
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#exampleModal">Sign-up</button>
</div>
</div>
</div>
</header>
I tried using the following:
#the-basics {
text-align: center;
}
However, the text does not center.
Any suggestions how to align the search box in the middle of teh navigation?
I appreciate your replies!

Answer 1

I think this will work,Best of luck
#the-basics {
text-align: center;
}
::-webkit-input-placeholder {
text-align: center;
}
:-moz-placeholder {
text-align: center;
}