CSS 文本框 alignment inside div 和图像

Question

I'm trying to align a textbox inside a <div> - using the class .textbox

CSS Code

.sec1 {
   padding-left: 20px;
   padding-right: 20px;
   display: relative;
}

.textbox {
   display: absolute;
   top: 10px;
   background-color: white;
   border-radius: 10px;
}

.subcars {
   display: inline-flex;
}

.selectcar {
   width: 80%;
}

HTML Code

<div class="subcars">
    <div class="sec1">
         <button class="bot"><img class="selectcar" src="Images/caradd2.png" alt="selectcar"></button>
         <br><input name="cars1" class="textbox"></input>
    </div>
</div>

The results so far is (I'm using pesticide to clarify the elements):

As it is possible to see, the text box is not centered inside the <div> , how can I fix it?

Answer 1

As @m4n0 mentioned in the comments, relative and absolute are not invalid values for display attribute. So, you don't need them in your code.

And to center the textbox, you can add margin-left property with a value accordingly under .textbox css.