Cannot Get Button Text to Center Vertically

Question

So I have done several searches through various other questions on stackoverflow.com and various other websites to fix this issue I have been having. I have had no luck trying everything that I have found. I am using CSS to style these buttons for use on a website, and I cannot get the text to center vertically in Firefox. It is centered on Google Chrome and Internet Explorer (crazy, I know). However, in the fiddle, the text appears to not be vertically centered in Google Chrome either.

Here is the CSS:

button {
    margin: 0;
    padding: 0;
}
button.slide_button {
    background-color: #E3E4F0;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    height: 25px;
    padding: 0px 5px;
    vertical-align: middle;
    line-height: 25px;
}
button.slide_button:hover {
    background-color: #E3E4F0;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    height: 25px;
    color: #F00;
}
button.slide_button:active {
    background-color: #BFBFE3;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    height: 25px;
}

Here is the HTML (contains references to Javascript functions I use on the site):

<button id="slide_prev" class="slide_button" onClick="prevImg()">Previous</button>
<button id="slide_pause" class="slide_button" onClick="pauseShow()">Pause</button>
<button id="slide_next" class="slide_button" onClick="nextImg()">Next</button>

Here is the fiddle: http://jsfiddle.net/59ven/

If it were a div, setting the height and line-height to the same value would work. A button is a different thing, which may explain stefanglase's results. Why use a button, anyway? You've marked it up so much you could easily make it a div, and then the appearance would be more predictable. — , Jul 30 '13 at 21:09
That's a good question. I should probably just use a div for it anyways. I guess I've been so focused on trying to fix this issue that I didn't think of simply using a div. Before, I wasn't sure if there was an onClick property for divs, but I just looked it up and found out there is. I think I'll try a div and let you guys know how it works. — P4T4R, Jul 30 '13 at 21:12
This fixes the vertical alignment of text in button/input and select controls on Firefox for me http://stackoverflow.com/a/1986666/799161 — Hoang Huynh, Oct 31 '13 at 18:16
Here is a solution for something similar. It has already been answered here on s.o https://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div — ihaxx, Jul 30 '13 at 21:05

score 2 · Accepted Answer · answered Jul 30 '13 at 21:15

I personally like to center text on buttons using padding. This allows to you get a nice vertical (and horizontal) centering on all browsers and you can control the spacing above and below.

I would normally do something like this with the css (left out hover effect):

input[type="button"], input[type="submit"], a.btn:link, a.btn:active, a.btn:visited {
    background-color: #E3E4F0;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    padding: 5px 8px 5px 8px;
    text-decoration: none;
}

Then you can use it like this:

<input type="button" onclick="whatever" value="Button Text" />

or make a link look like the button

<a href="#" class="btn">Button Text</a>

Note that using "height" and "line-height" properties can limit you. For example, if you want a button with 2 lines of text, do you really want them at 25px line height for each line? With padding, you can keep a normal line height of 18px-20px and the button conforms nicely to multiple lines.

Hope that helps!

I don't think it really matters. Input tags are just my preference. — Ricketts, Jul 30 '13 at 21:24
Perfect, this is a nice work-around. I wish I had just used padding to make the button larger from the beginning. That height attribute was giving me all sorts of issues across browsers. Thanks so much. — P4T4R, Jul 30 '13 at 21:37

score 0 · Answer 2 · answered Jul 30 '13 at 21:18

0

vertical-align is not for align text of button. if you remove vertical-align from css nothing happens and if you set it to top or something again no changes. the problem is because of line-height property. if you remove it everything will be okey.

answered Jul 30 '13 at 21:18

Keyvan Hedayati

46
6

With everything removed it works in Chrome and IE, but not Firefox. – P4T4R Jul 30 '13 at 21:24
I just removed line-height then tested in firefox and text was in middle. just know that vertical-align don't do anything here. – Keyvan Hedayati Jul 30 '13 at 21:27
I removed line-height and vertical align and the text was sitting in the bottom. I appreciate the help though. – P4T4R Jul 30 '13 at 21:39

Cannot Get Button Text to Center Vertically

2 Answers2