块元素，水平居中对齐和可能的最小宽度

【问题标题】：Block element, horizontal center aligned and minimum width possible块元素，水平居中对齐和可能的最小宽度
【发布时间】：2011-02-03 13:48:04
【问题描述】：

我试图让这个块元素在中间水平对齐，但同时我希望宽度尽可能小以容纳里面的内容。但我不认为这是可能的，或者我自己做不到......

a#button-link {
    background: url("images/button-link.png") no-repeat scroll center left;
    margin: 12px auto 0 auto;
    display: block;
    width: 125px;
    height: 32px;
    line-height: 32px;
    padding-left: 35px;
    font-weight: bold;
}

这是我当前的代码...这背后的想法是，该标签的文本可能会稍大或稍小，具体取决于用户语言以及同一句子对于该特定用户语言的字符数。我无法控制，但我仍然想让这个元素水平对齐到中心。

这可以通过 CSS 实现吗？

【问题讨论】：

标签： css xhtml alignment center-align

【解决方案1】：

使用display:table。

更新

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>display:table</title>
<style>
div
    {
        display:            table;
        border-collapse:    collapse;
        border:             1px solid #950;
        margin:             100px auto;
    }
* html div
    { /* IE 6. If anybody finds a good solution for IE 7: Tell me! */
        width:              .1em;
    }
* + html div
    { /* IE 7 Hack. Not perfect. */
        float:              left;
        margin:             100px auto 100px 45%;
    }
</style>

<div>Some Text.</div>

Live Demo

【讨论】：

就算行得通，行不行？我的意思是，我正在使用 div 和 CSS，所以我避免使用表格，现在我将 display 属性设置为表格？有点讽刺……
刚刚检查过，它不适用于 IE6，但我不在乎。 IE9 已经在开发中了，那就是 3 个新版本，是时候更新人家了。
@Nazgulled CSS 永远不会改变文本的语义，而标记会。这就是 HTML 表格和 CSS 属性之间的区别。