html - How to align the input text so that it's in the middle of the text box - Stack Overflow

admin管理员组

文章数量:1335887

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)

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

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

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)

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

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

I tried using

text-align: middle;

but that didn't work.

• html
• css

Share Improve this question Follow edited Nov 20, 2024 at 20:44 mrconcerned 2,00511 gold badge1717 silver badges2828 bronze badges asked Nov 19, 2024 at 21:48 AllenAllen 3944 bronze badges 2

• Have you tried text-align: center ? – PM 77-1 Commented Nov 19, 2024 at 21:56
• I am positive this is a dup somewhere – Rob Commented Nov 20, 2024 at 14:34

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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">

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.">

If you only use uppercase letters (which don't have any descenders), you can use different top and bottom padding – you'll have to find out the right values by trial and error. Example (I only used padding-top here):

#textInput {
  border-radius: 5px;
  border-style: solid;
  border-color: grey;
  height: 20px;
  width: 500px;
  position: absolute;
  font-family: Helvetica;
  font-size: 20px;
  padding-top:4px;
}

<input id="textInput" type="text" value="UPPER CASE LETTERS ONLY, WITH TOP PADDING">

The line-height property specifies the height of a line.

Normal height property is used to set height of other html elements but to set height of a text line line-height property is used.

To vertically align middle of text the line-height property should be equal to the height of the element. In this case the line-height and height of textbox should be equal.

#textInput {
  border-radius: 5px;
  border: 1px solid grey;
  width: 210px;
  font-family: MathGG;
  font-size: 20px;
  /* added below code to understand better */
  height: 50px;
  padding: 5px 10px;
  margin: auto;
  display: block;
  line-height: 50px;
}

<input id="textInput" type="text" value="the quick brown fox " />

I tried using

text-align: middle

It should be text-align: center

See MDN

本文标签： htmlHow to align the input text so that it39s in the middle of the text boxStack Overflow