While developing a search tool for my website, I encountered an issue with centering elements. I created a main div container with margin: 0 auto, which successfully centered the container. However, when I tried to center another element inside it using margin: 0 auto;, it did not work as expected.
Here is the HTML code:
<div class="searchbox">
<div class="mover">
<input type="text" name="searchfield" class="search" placeholder="Search Item">
And the CSS:
.searchbox {
position: absolute;
width: 100%;
overflow: hidden;
left: 0%;
top: 55px;
height: 350px;
background-color: black;
}
.mover {
display: block;
z-index: 2;
background-color: white;
margin: 0 auto;
width: 70%;
height: 100%;
min-width: 600px;
height: 250px;
}
.search {
position: relative;
width: 70%;
height: 35px;
top: 100px;
margin: 0 auto;
border: solid 1px black;
border-radius: 7px;
}
.search[type=text] {
color: black;
text-align: center;
font-family: 'Lato';
font-size: 15px;
}
It's worth noting that I do not want to set width: 100% for the search element. Instead, I've defined a min-width: 600px for other elements inside the mover, which is not relevant to this issue.
You can view the Fiddle for reference.
What could be causing the problem? I've specified the width for both elements and used margin: auto, but it's still not centered. Is there a solution to this issue?