Align the elements of <input> tag to center on HTML

In this article, we will learn how to center align the elements of the input tag in html.

Usually, when we type anything in an input field on an HTML page, it is left-aligned.

Now, to align the text to the center in the input field, we can do this simple CSS style.

<u>Using inline style</u>

<form>
      <input
        style="text-align: center;"
        type="text"
        placeholder="Enter your name"
      />
</form>

<u>Using style.css file</u>

If you want to add text-align: center to all the text fields on your HTML form, then inline styling becomes repetitive work. Instead, we can target all the input filed in our CSS file using a class name.

Example:

<form>
      <input
        type="text"
        class="form-input"
        placeholder="Enter your name"
      />
</form>

Here, we have added a class name (form-input) to the input field and then added the style in our css file like this.

.form-input {
  text-align: center;
}

And that's it, this is how you can center the alignment of the elements in your input field on your html page.