Within this webpage, there exists a logo image file with a specified height to ensure proper fit. The logo positions itself beautifully within its designated div, with the wrapper div containing text-align: center, resulting in perfect alignment. Additionally, there are two text input boxes accompanied by a search button, enclosed in a separate div from the logo's section. However, upon page load, this particular div appears on the left side of the screen.
If I were to eliminate the searchArea div and solely wrap the button and input boxes within the main wrapper, everything aligns perfectly but becomes distorted due to width properties being affected.
The challenge at hand is how to centrally position all elements contained within the searchArea div beneath the logo without compromising the defined styles for the searchArea class???
HTML:
<div id="logo" class="centerWrapper">
<img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo">
</div>
<div id="search" class="centerWrapper">
<div id="searchArea" class="searchArea">
<input type="text" class="inputBox" name="charName" placeholder="Character Name"><br>
<input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br>
<button type="button" class="searchButton">Search</button>
</div>
</div>
CSS:
.centerWrapper {
text-align: center;
}
.logo {
height: 46px;
}
.searchArea{
margin-top: 0.8%;
height: 125px;
width: 340px;
}
input.inputBox {
background-color: #0B122F;
border-color: #877055;
color: #4A4E5A;
margin: 5px 0px;
padding: 5px 10px 5px 10px;
width: 72%;
}