html vertical align the text inside input type button

Question

I'm trying to create a button with height of '22px' , and that the text inside the button will be vertically aligned in the center of the button. I tried everything , and can't find out how to do it.

How can this be done?

UPDATE: this is my code:

.test1 label {
  float: left;
  clear: left;
  width: 31%;
  margin-right: -2px;
}

.test1 input {
  float: left;
  width: 69%;
  margin-right: -2px;
}

.testbutton {
  float: left;
  margin-left: 10px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background-color: #fbfbfb;
  border: 1px solid #b7b7b7;
  color: #606060;
  cursor: pointer;
  display: inline-block;
  font: bold 12px/100% Arial, sans-serif;
}

<div class="test1">
  <label for="test" title="test">test</label>
  <input style="width:18px; float:left;" type="checkbox" name="test" id="test" tabindex="5" />
  <input class="testbutton" id="testbutton" style="width:60px;" type="button" value="Import" />
</div>

score 93 · Answer 1 · edited Jul 19 '23 at 18:21

93

Using flexbox:

.testbutton {
  display: inline-flex;
  align-items: center;
}

<button>a button</button>

You can use flexbox (check browser support, depending on your needs).

edited Jul 19 '23 at 18:21

isherwood

58,414
16
114
157

answered Jul 23 '16 at 14:51

Pensierinmusica

6,404
9
40
58

The best solution I've seen so far. Also works well with varying height buttons. (For example, buttons with a border) – Swen Apr 05 '18 at 13:43
11

To also center it horizontally, add "justify-content: space-around;" – kosher Aug 26 '18 at 15:37
2

Getting back on my previous comment, this does not seem to be a proper solution because `button` element cannot have `display: flex;`. Check out this question for more info: https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-or-fieldset-elements – Swen Mar 06 '19 at 16:03

score 61 · Answer 2 · edited May 23 '13 at 09:58

61

Try adding the property line-height: 22px; to the code.

edited May 23 '13 at 09:58

Vukašin Manojlović

2,645
2
21
26

answered Mar 03 '11 at 18:25

JAiro

5,914
2
22
21

1

I added "line-hight" property , and it's still not working.. I've updated my question with my code.. thank's! – user590586 Mar 06 '11 at 08:17
Hi! You have tried you code and the text "import" inside the button is correctly align, I don't undestand what is worng. I have try this in Firefox and chrome. – JAiro Mar 08 '11 at 00:18
1

I'm using IE so i didn't check it in Firefox or chrome, I changed the input to button instead and now it works.. thank's for your help! – user590586 Mar 09 '11 at 14:08
experimenting with line-height seemed to work for me too, eventually...thanks! – jsh Dec 18 '12 at 17:27
Be careful using this. If your text ever needs to wrap, it will break the layout. I recommend peterhry's answer below. Switching to a button tag will automatically center the content vertically, and will wrap content nicely if needed. – JeffreyPia Feb 12 '16 at 22:09
This worked for me on a – Phil Hudson Feb 14 '16 at 09:25
1

I set `line-height: 0;` for all different size buttons to vertically align text, svg images, etc properly and automatically. The button adjusts its own size according to content. – Snackoverflow Apr 07 '20 at 12:17

score 16 · Answer 3 · edited Jan 01 '13 at 01:58

16

Use the <button> tag instead. <button> labels are vertically centered by default.

edited Jan 01 '13 at 01:58

Brian Mains

50,520
35
148
257

answered Jan 01 '13 at 01:37

peterhry

1,120
12
16

6

Yes, the content inside a button tag is centered by default in every browser. Here is a demo: http://codepen.io/peterhry/pen/arDAF – peterhry Dec 18 '13 at 08:39
For the record, this was a useful hack before flexbox was widely supported but there is no good reason to use it today. – peterhry May 17 '18 at 22:38
It looks centered in some cases, but its not in 50% position. – ViliusL Feb 03 '20 at 13:18

score 7 · Answer 4 · answered May 22 '12 at 23:32

7

I found that using a fixed width with padding seems to work (in ff at least)

.Btn
 {
   width:75px;
   padding:10px;
 }

Try it at:-

http://jsfiddle.net/stevenally/z32kg/

answered May 22 '12 at 23:32

stevenally

89
1
4

score 6 · Answer 5 · answered Aug 10 '20 at 19:36

I was having a similar issue with my button. I included line-height: 0; and it appears to have worked. Also mentioned by @anddero.

button[type=submit] {
  background-color: #4056A1;
  border-radius: 12px;
  border: 1px solid #4056A1;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 2px 1px;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  height: 20px;
  line-height: 0;
}

score 4 · Answer 6 · answered May 31 '11 at 07:43

I've given up trying to align my text on buttons! Now, if I need it, I'm using <a> tags, like so:

<a href="javascript:void();" style="display:block;font-size:1em;padding:5px;cursor:default;" onclick="document.getElementById('form').submit();">Submit</a>

So, if the document's font size is 12px, my "button" will have 22px height. And the text will be vertically align. That in theory, because, in some casses, an unequal padding of "6px 5px 4px 5px" will do the job done.

Although, is a hack, this technique is pretty good for solving compatibility issues in older browsers too, like IE6!

score 2 · Answer 7 · answered Sep 06 '11 at 18:10

If your button weren't floated, you could use vertical-align:middle; to center the text inside it. After lots of experimentation, this was the only solution I could find that worked in IE without changing markup. (in Chrome, button text seems to be automatically centered without this hack).

But you use a float:left which forces the element to be a block element (your display:inline-block is ignored), whcih in turn prevents vertical-align from working because vertical-align doesn't work inside a block element.

So you have three choices:

stop using floats in this form, and use inline and inline-block elements to simulate floating.
as @stefan notes above, use another element like an <a> and use javascript to submit the form.
accept that in IE your buttons will be off by 1px vertically.

score 0 · Answer 8 · answered Feb 22 '13 at 15:55

The simplest thing you can do is use reset.css. It normalizes the default stylesheet across browsers, and coincidentally allows button { vertical-align: middle; } to work just fine. Give it a shot - I use it in virtually all of my projects just to kill little bugs like this.

https://gist.github.com/nathansmith/288292

score 0 · Answer 9 · answered Mar 31 '15 at 15:52

I had a button where the background-image had a shadow below it so the text alignment was off from the top. Changing the line-height wouldn't help. I added padding-bottom to it and it worked.

So what you have to do is determine the line-height you want to play with. So, for example, if I have a button who's height is truly 90px but I want the line-height to be 80px I would have something like this:

input[type=butotn].mybutton{
    background: url(my/image.png) no-repeat center top; /*Image is 90px x 150px*/
    width: 150px;
    height: 80px; /*shadow at the bottom is 10px (90px-10px)*/
    padding-bottom: 10px; /*the padding will make up for the lost height while maintaining the line-height to the proper height */

}

I hope this helps.

html vertical align the text inside input type button

9 Answers9

Using flexbox:

Linked