Jochem Jochem - 1 year ago 81
CSS Question

How do I center a textbox in a form with HTML/CSS, if I use padding?

I've been looking everywhere but I can't find this, so this may be a stupid question.

Basically, I have a textbox that I want to center within my page. However, I use padding inside the textbox, so the text isn't right next to the border.

How do I do this?

The website in question:
As you can see, the amount of distance between the left & right side isn't the same. This occurs because I use padding.

My code:

<input type="text" name="username" value="Gebruikersnaam", id="TextField" style="width:100%;height:25px;background-color:black;color:white;border:0px;margin:auto;padding-left:4px;padding-right:4px;">

Any help would be much appreciated. Thank you in advance.

Answer Source

Use box-sizing: border-box. That way, the total width of the element will include the padding of the element. See Box Model on MDN for more information.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download