Html Question posted in
Some basic documentation can be found here.

Html – How to align the input text so that it's in the middle of the text box

I thought it would look good if I change the font that is typed into the text box but the letters are not aligned in the middle.
enter image description here
The letters are instead sticking at the top right corner. How do I fix this? (I don’t want to center the letters)

Css:

#textInput {
  border-radius: 5px;
  border-style: solid;
  border-color: grey;
  height: 20px;
  width: 210px;
  position: absolute;
  font-family: MathGG;
  font-size: 20px;
}

Html:

<input id="textInput" type="text">

I tried using

text-align: middle;

but that didn’t work.

Tags:

3

Answers


  1. 0

    I tried using

    text-align: middle

    It should be text-align: center

    See MDN

    Login or Signup to reply.
  2. 0

    Without seeing it with the actual font you are using we can’t provide an exact solution, but you should be able to do this with padding. For example, if the text is too high in the input simply add some top padding.

    Adjusting the line-height might help as well.

    #textInput {
  border-radius: 5px;
  border-style: solid;
  border-color: grey;
  height: 20px;
  width: 210px;
  position: absolute;
  font-family: MathGG;
  font-size: 20px;
  line-height: 20px; /* Adjust this */
  padding-top:5px; /* And this */
}
    <input id="textInput" type="text">
    Login or Signup to reply.
  3. 0

    The text in the input field is vertically centered by default. You have to consider all letters/characters, not only the ones that don’t descend below the baseline. See the example below:

    #textInput {
  border-radius: 5px;
  border-style: solid;
  border-color: grey;
  height: 20px;
  width: 500px;
  position: absolute;
  font-family: MathGG;
  font-size: 20px;
}
    <input id="textInput" type="text" value="it is vertically centered: consider *all* letters like g t p b y etc.">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search