Center Link using sliding door CSS

Question

I'm trying to center the entire link and i'm struggling for a solution. I'm using a simple sliding door style for my link and I'd like it to be center.

Here's a demo you can interact with: http://jsbin.com/ibidu3

<style>
  a.btn_blue {
  background:url("http://img291.imageshack.us/img291/2600/btnblueleft.gif") no-repeat scroll left top transparent;
    float:left;
  text-decoration:none;
  margin-right:4px;
  padding-left:5px;
  color:#fff;
  }

a.btn_blue span{
    background:url("http://img826.imageshack.us/img826/1531/btnblueright.gif") no-repeat scroll right top transparent;
    float:left;
  padding:6px 10px 10px 4px;
  }
  </style>

<a href="#" class="btn_blue"><span>Learn More: <strong>Benefits</strong></span></a>

Answer 1

If you are talking about text not being centered within the anchor tag then that is due to ppadding in a.btn_blue span being different on the left and right side. padding:6px 10px 10px 6px;