在 IE5/6/7/8 和 FF 中居中答案

【问题标题】：Centering in IE5/6/7/8, and FF在 IE5/6/7/8 和 FF 中居中
【发布时间】：2010-05-30 05:11:23
【问题描述】：

我正在尝试使 div 的内容居中，以便在 IE 5、6、7 和 8 以及 FF 中正确显示。

<div id="YoutubeClip">
    <h3>Subscribe on YouTube!</h3><br>
    <ul class="gallery clearfix"><a href="http://www.someyoutubevideo.com" rel="prettyPhoto" title="Some youtube title"><img alt="some youtube title" src="youtube clip image" border="0"></a></ul>
    Some youtube title
</div>

我的 CSS 很简单：

text-align: center

正如预期的那样，这会显示以 FF 为中心的图像和文本。

在 IE5 中，图像左对齐。文本也是左对齐的，一行只有一个单词，如下所示：

它
出现
喜欢
这个。

IE 6 也有同样的问题。

IE 7 似乎也有同样的问题，但是当我在 div 周围加上边框时，内容会溢出边框。

在 IE8 中显示正确

对此的任何帮助都会很棒。我正在尝试更好地学习 CSS，但我还没有弄清楚这个问题的复杂性。

【问题讨论】：

请贴出你也用过的CSS。
你为什么要在 IE5 中测试？你有这样做的正当理由吗？

标签： css html internet-explorer-6 centering

【解决方案1】：

当你说“看起来像这样”时，没有什么可看的。

我要做的第一件事是验证您的代码，因为您拥有的 <ul> 标记使用不当：

http://validator.w3.org/

验证代码的主要目的是为了浏览器兼容性。

我看不到你正在使用的 CSS，我还没有用 IE5 测试过，但我会尝试使用

margin: 0 auto

使您的 div 居中。它可能会更有效。

希望有帮助:)

【讨论】：

您也可以将 'align="center"' 添加到 div 标签本身。

【解决方案2】：

您应该将text-align:center 用于ul 和h3。如果您可以发布 css，可能会比这更好。试试这个。

【讨论】：

【解决方案3】：

要将块级元素居中对齐，您需要：

margin-left: auto;
margin-right: auto;

【讨论】：

【解决方案4】：

#YoutubeClip {
margin: 0 auto 0 auto;
}

0 = 顶部和底部 auto = 左右

将它放在包含内容的 div 上应该使整个块居中，并且即使用户浏览器未最大化或重新调整大小，也会保持居中。

如果您希望将块内的内容而不是块自身居中

text-align: center;需要添加到#YoutubeClip内的h3和其他标签

是你要找的东西

我建议在尝试验证之前将<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 添加到您的 html 文件的顶部，以便您有一个坚实的基础来开始验证。

至于您的<ul class="">，如果您打算按照代码示例中显示的方式使用它，则可以将其更改为<div class="">。否则，您需要在其中的内容周围添加<li></li>（对于每个单独的行）。

前：

<ul>
   <li>content goes here</li>
   <li>more content</li>
</ul>

【讨论】：