CSS滑门的按钮居中对齐 [英] CSS sliding-door buttons center alignment

问题描述

我需要帮助来调整CSS按钮。我尝试了许多不同的变化，我只是不能集中我的按钮，我想要的方式。

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

我用2图片以构成按钮（可以这样做对1的图像，但在这种情况下，我们有两个）。一切正常，只要我们运用预期浮动：左或浮动：权到父div元素，以限制'宽度的div，并立即关闭，作为股利端的内容。您可以删除浮动：从按钮左侧明白我的意思

但对于中心位置的按钮？我无法添加浮动：左/右，因为我要对齐，中间

在理论上，我可以设置

  {
    宽度：XXpx;
    保证金：0汽车;
}
 

和我会得到什么，你可以在这个图中看到：

但我不知道里面的文本的长度。具有不同的翻译我的按钮可以很短，或5倍长。

我还试图用＆LT;跨度＆GT; 而不是＆LT; D​​IV＆GT; ，但不幸的是嵌套内联元素不正确地尊重他们的填充...

是的，我必须使用＆LT; A＆GT; 里面，所以按键可以通过网络爬虫访问

我很坚持这一点。

解决方案

  .button {显示：直列块;}
 

似乎这样的伎俩。

inline-block的浏览器支持： http://www.quirksmode.org/css/display html的

更多关于如何解决内联块相关的浏览器问题： http://foohack.com/2007/11/跨浏览器支持换inline-block的-定型/

I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.

Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm

I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.

But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.

In theory, I could set

{
    width:XXpx;
    margin:0 auto;
}

And I will get what you can see on this picture:

But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.

I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...

And yes, I must use <a> inside, so buttons can be accessed by web crawlers.

I'm really stuck on this one.

解决方案

.button {display:inline-block;}

Seems to do the trick.

inline-block browser-support: http://www.quirksmode.org/css/display.html

More about how to work around the browser issues related to inline-block: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

这篇关于CSS滑门的按钮居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！