CODEWITHSUNDEEP
htmlcss
user590586
user590586

Reputation: 3050

html vertical align the text inside input type button

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>

Upvotes: 79

Views: 201548

Answers (9)

Pensierinmusica
Pensierinmusica

Reputation: 6950

Using flexbox:

.testbutton {
  display: inline-flex;
  align-items: center;
}
<button>a button</button>

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

Upvotes: 99

Stein Monteiro
Stein Monteiro

Reputation: 311

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;
}

Upvotes: 6

Philll_t
Philll_t

Reputation: 4437

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.

Upvotes: 0

JAiro
JAiro

Reputation: 5999

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

Upvotes: 61

Alan L.
Alan L.

Reputation: 380

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

Upvotes: 0

peterhry
peterhry

Reputation: 1130

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

Upvotes: 16

stevenally
stevenally

Reputation: 79

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/

Upvotes: 6

Justin Grant
Justin Grant

Reputation: 46683

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.

Upvotes: 2

StefanNch
StefanNch

Reputation: 2609

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!

Upvotes: 4

Related Questions