How is the text able to stay centered in the middle?

Without anything extra added to it?

What causes it to stay centered in the middle?

input[type=submit] {
  border: 1px solid #0059dd;
  cursor: pointer;
  font-size: 22px;
  background: black;
  width: 200px;
  height: 200px;
  color: #0059dd;
  font-family: "Times New Roman", Times, serif;
}
<div class="info">
  <input type="text" id="searchFor" name="someNameHere" placeholder="Search" />
  <input id="sent" type="submit" value="Search" />
</div>

Your input styles do not include a specific text-align, so the user-agent style sheet is used instead. Try adding the following to your existing rules to see the difference.

input[type=text] { text-align:left; }
input[type=submit] { text-align:right; }

If you want them both to be aligned left, try this before the existing input styles

input { text-align:left; }
1 Like

If I want to keep the text in the middle, should it stay undefined?

or would I define the text as something that specifies middle?

input { text-align:center; }

This will apply the style to all input elements. If you want to target a specific input element you need to add it to the existing rules, for instance:

 input[type=submit] { text-align:center; }
1 Like

This is horizontally:
text-align:center;

What about vertically?

Paul_Wilkins gave you a link to a complete guide about centring a couple of months ago. Please take time to learn from the information you are given, rather than ignoring it and repeatedly asking the same questions over and over.

You also have another thread on the subject:

Vertically aligning text using Dom properties

2 Likes

A button of input type="submit" is styled via the UAs internal styling mechanisms (shadow dom and proprietary css). The text is always vertically centred in the submit button by default. You don’t need to do anything and you won’t find any normal css being applied to cause that centering.

Most form controls are styled via the UA (user agent) and many properties are not available to authors.

The two buttons will align vertically because they are affected by the default vertical-align:baseline rules they have. This means that the baseline of the text is aligned in both inputs. It does not actually mean they are vertically centred in respect of each other as that would require vertical-align:middle; (a subtle difference in your example).

1 Like

The text is always vertically centred in the submit button by default.

It’s aligned not only vertically, but horizontally also right?

You only mentioned vertically though.

Yes the user agent styles apply text-align:center by default.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.