What is the best way to vertically center a textbox within a form using HTML/CSS, especially when padding is involved?

Question

What is the best way to vertically center a textbox within a form using HTML/CSS, especially when padding is involved?

I've searched extensively but I'm struggling to find a solution, so please excuse if this seems like a simple question.

Essentially, I have a text box that I want to center on my page. The issue is that I have padding inside the textbox, which affects the alignment of the text with the border.

Is there a way to achieve this?

Here is the website in question: http://prntscr.com/c2m93u You'll notice that the spacing between the left and right sides is uneven. This is due to the padding I have applied.

Below is 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 assistance on this matter would be greatly appreciated. Thank you in advance.

html css

Answer 1

Answer №1

To ensure the total width of the element includes the padding, use the CSS property box-sizing: border-box. For further details, refer to the CSS Box Model documentation on MDN.

Answer 2

To ensure the total width of the element includes the padding, use the CSS property box-sizing: border-box. For further details, refer to the CSS Box Model documentation on MDN.

Answer 3

Answer №2

HTML


<div>
  <input type="text" name="username" value="Username", id="TextField">
</div>

CSS


*
{
  box-sizing: content-box;
}
div
{
  width:90vw;
  margin:auto;
  text-align:center;
  background-color:rgba(50,50,50,1);
  padding:10px;
}
input[type='text']
{
  width:75%;
  margin:auto;
  height:20px;
  background-color:black;
  color:white;
  border:0px;
}

FIDDLE : https://jsfiddle.net/27czxvdg/

Answer 4

HTML


<div>
  <input type="text" name="username" value="Username", id="TextField">
</div>

CSS


*
{
  box-sizing: content-box;
}
div
{
  width:90vw;
  margin:auto;
  text-align:center;
  background-color:rgba(50,50,50,1);
  padding:10px;
}
input[type='text']
{
  width:75%;
  margin:auto;
  height:20px;
  background-color:black;
  color:white;
  border:0px;
}

FIDDLE : https://jsfiddle.net/27czxvdg/

What is the best way to vertically center a textbox within a form using HTML/CSS, especially when padding is involved?

Answer №1

Answer №2

Similar questions

Issues with Mouse Hover/Image Replacement

Tips for returning an element to its starting position following animation

Checking the status of a Cisco Jabber user using JavaScript

Verify whether all the elements within a specific div are distinct by utilizing jQuery

Use Styled-Components to define the appearance of child elements when their parent is hovered over

Eliminating the Double Tap Issue on Dropdowns in Bootstrap 3.0

Develop a custom dropdown menu using JavaScript

What is the best method for directing to various pages on a GitHub Pages website?

Menu Design Inspired by Amazon Using jQuery

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Monitoring alterations in dynamically produced input fields using jQuery

Tips for enhancing the clarity of an `html2canvas` screenshot

Is it possible to include a relative URL with a different port number in a hyperlink?

Achieving proper layout in Material-UI Autocomplete by splitting long words

How can I access multiple icons using jQuery?

Why is it that filling a DataTable with a variable doesn't work, but when I input the same value into a PHP site and request it using AJAX, it suddenly works?

Arranging Elements Using CSS

Exploring test automation methods for selecting HTML elements - whether based on Element ID or DataAttribute

The problem with the CSS3 media query arises only within a particular div and not on

Why does the JavaScript background color change take precedence over CSS selectors for my object?