CSS推拉门按钮居中对齐

Question

我需要帮助来对齐 CSS 按钮。我尝试了许多不同的变化，但我无法按照我想要的方式将按钮居中。

首先，看看这个网址：http://www.front-end-developer.net/cssbuttons/example.htm

我使用 2 个图像来形成一个按钮（这可以在 1 个图像上完成，但在这种情况下我们有两个）。只要我们将float:left 或float:right 应用于父div 元素，一切都会按预期工作，以“限制”div 的宽度并在div 的内容结束时立即关闭它。您可以从按钮中删除 float:left 以了解我的意思。

但是居中的按钮呢？我不能添加 float:left/right 因为我想在中间对齐。

理论上，我可以设置

{
    width:XXpx;
    margin:0 auto;
}

我会得到你在这张照片上看到的东西：

_{（来源：front-end-developer.net）}

但我不知道里面文字的长度。有不同的翻译，我的按钮可能很短，或者是那个长度的 5 倍。

我也尝试使用<span> 而不是<div>，但不幸的是嵌套的内联元素不正确地尊重它们的填充...

是的，我必须在里面使用<a>，以便网络爬虫可以访问按钮。

我真的被这个卡住了。

Answer 1

.button {display:inline-block;}

似乎可以解决问题。

内联块浏览器支持：http://www.quirksmode.org/css/display.html

有关如何解决与 inline-block 相关的浏览器问题的更多信息： http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/