Question

我试图将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，但我还没有弄清楚这个问题的复杂性。

Answer 1

当你说“看起来像这样”时，没有任何东西可以看。

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

http://validator.w3.org/

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

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

margin: 0 auto

让你的div居中。它可能会更有效。

希望有所帮助：）

Answer 2

您应该text-align:center使用ul和h3。如果你可以发布css而不是这可能会更好。试试这个。

Answer 3

要在中心对齐块级元素，您需要：

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

Answer 4

#YoutubeClip {
margin: 0 auto 0 auto;
}

0 =顶部和底部 auto = left and right

在包含内容的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>（对于每个单独的行）。

<强> EX：

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

以IE5 / 6/7/8和FF为中心

4 个答案: