Clever Geek Handbook

Aligning text in HTML browser in Firefox

Using this CSS:

button {
    font-size: 14px;
    height: 25px;
    width: 25px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

I am unable to align certain text correctly in Firefox. For example:

Firefox (38.0.5)

enter image description here

Chromium

enter image description here

Horizontal alignment of [+] button is disabled in Firefox but not Chrome? What's going on and how can I fix it?

JSFiddle: http://jsfiddle.net/oge3tg3n/2/

+3


source to share


1 answer


If you increase the height and width to 27px, the alignment will be centered in both Firefox and chrome.

button {
   font-size: 14px;
   height: 27px;
   width: 27px;
   text-align: center;
   vertical-align: middle;
   padding: 0;
   margin-left: auto;
   margin-right: auto;
}


Tested in firefox 38.0.5.

+1


source






More articles:


All Articles