Html 为什么我的按钮没有完全对齐？

我在这里贴了一个按钮：

但出于某种原因，它并没有完全排队。这是什么原因造成的

我试着改变线条高度、填充物等

以下是我的CSS代码：

a.gbutton {
    background: transparent url('buttonside.png') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 82px;
    margin-right: 6px;
    padding-right: 46px; /* sliding doors padding */
    text-decoration: none;
}

a.gbutton span {
    background: transparent url('buttonmain.png') no-repeat;
    display: block;
    line-height: 68px;
    padding: 5px 0 5px 18px;
}

---

我在网上找到的一个教程中对此进行了修改，而完美的CSS布局对我来说一直是一个难题。

滑动门技术很有效，因为扩展矩形不会改变其外观。但是扩展椭圆会导致错误，因此您的代码不会像您期望的那样工作

以下是我能得到的最好的：

a.gbutton {
    background: transparent url('buttonside.png') no-repeat scroll right top;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 82px;
    margin-right: 10px;
    padding-right: 51px;
    text-decoration: none;
}

a.gbutton span {
    background: transparent url('buttonmain.png') no-repeat left top;
    background-size: 100% auto;
    display: block;
    line-height: 68px;
    padding: 5px 0 5px 18px;
    height: 100%;
    width: 100%;
}

更新

只需使用单个图像并指定CSS：

background-size: 100% auto;

---

按钮的期望位置是什么？最终我打算把它们放在页面的中间，在CMS的内部。为什么不把整个椭圆作为一个单独的图像？因为文本大小会改变，我希望按钮能够在大小上改变。图像的其余部分（边缘除外）必须具有平行边，以便延伸它们不会改变形状。你有一个椭圆。那么你认为我应该用一个图像替换我的双图像吗？