Works in Chrome but not Firefox. I know there are other issues with this but for now I'm just trying to figure out exactly why the arrows are centered in chrome but not in Firefox. I've tried adding text-align:center but that seems to have no effect. 

[JSFIDDLE](http://jsfiddle.net/79Z76/5/)

```
<div id='word_list_wrper'>
<table id='user_word_table'>
    <tr>
        <td>1.</td>
        <td>item</td>                            
        <td>
            <div id="editBtns">
                <button id="removeBtn">x</button>
                <div id="upDownBtns">
                    <button>&#8593;</button>
                    <button>&#8595;</button>
                </div>
            </div>
        </td>
    </tr>
</table>

#word_list_wrper table{
    width:228px;
}

#word_list_wrper table td:first-child,
#word_list_wrper table td:last-child
{
   width:20px;
}

#word_list_wrper table td{
    text-align:left;
    padding:2px 5px;
    vertical-align:middle;  
}

#editBtns{
  margin:0;
  width:46px;
  height:22px;

}
#removeBtn{
  width:23px;
  height:22px;
  margin:0;
  float:left;
  color:red;
}
#upDownBtns{
  float:left;
   height:20px;
   width:22px;
}
#upDownBtns button{
   margin:0;
   padding:0px 0px 2px 0px;
   width:11px;
   height:22px;
}

```