Question

I’m trying to center a span that has display:block; inside a button

it works in Chrome and in IE9 but not in Firefox

Here’s the link to it:
http://jsbin.com/adefom/5/edit

anybody knows how to make this span centered (vertically) in firefox ?

Answer 1

Just remove the hard-coded height and width on .btn and give it some padding.

<button class='btn'>
  <div class='icon'></div>
</button>

button
{
  margin: 0px;
  padding: 0px;
}

/* Firefox button padding fix */
button::-moz-focus-inner
{
  border: 0;
  padding: 0;
}

.icon
{
  background-color: black;
  width: 17px;
  height: 17px;
}

.btn
{
  padding: 4px;
}

The Firefox button padding fix is from here. Thanks to @Rajesh for finding that one.

Demo <– Click!