HTML/CSS：创建一个具有最小宽度的居中 div答案

【问题标题】：HTML/CSS: Creating a centered div with a min-widthHTML/CSS：创建一个具有最小宽度的居中 div
【发布时间】：2012-05-07 10:45:37
【问题描述】：

我想在我的页面上有一个div，它居中并具有一定的宽度，但如果内容需要，它会超出该宽度。我正在这样做：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            .container-center {
                text-align: center;
            }
            .container-minwidth {
                min-width: 5em;
                display: inline-block;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="container-center">
            <div class="container-minwidth">
                a
            </div>
        </div>
    </body>
</html>

这在 Firefox/Safari 上很有效，但在 IE6 上却不行，因为它不理解 display: inline-block。关于如何在 IE6 上也能进行这项工作的任何建议？

【问题讨论】：

IMO 应该让它在 IE6 上看起来很糟糕。

标签： html width css

【解决方案1】：

这不是一个完美的解决方案，但我已经解决了一些 IE6 缺乏对 min-width 支持的问题。

<style type="text/css">            
            .container-minwidth {
                min-width: 5em;

                width: auto !important;
                width: 500px; /* IE6 ignores the !important tag */

                /* would help for expanding content if it blows past 500px; */
                overflow:auto; 

                display: inline-block;
                border: 1px solid blue;
            }        
</style>

在这种情况下可能有帮助的另一个标签是溢出标签。

【讨论】：

【解决方案2】：

其实Alessandro IE6 确实理解display: inline-block，它不理解你的代码的是min-width。有many hacks to get this to work，但我不推荐其中任何一个。如果您要使用它们中的任何一个，请确保将它们放在特定于 IE6 的样式表中，这样它就不会干扰您的其他更标准的投诉浏览器。

【讨论】：

【解决方案3】：

<style type="text/css">            
        .container-minwidth {
            min-width: 5em;
            _width: 500px;
            white-space:nowrap;

            display: inline-block;
            *display:inline;
            *zoom:1;

            border: 1px solid blue;
        }        
</style>

【讨论】：

您可能想为 OP 的利益解释您的答案