3

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

4

4 回答 4

3

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

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

http://validator.w3.org/

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

我看不到您正在使用的 CSS，而且我从未使用 IE5 进行过测试，但我会尝试使用

margin: 0 auto

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

希望有帮助:)

于 2010-05-30T05:31:25.030 回答
0

你应该使用text-align:centerforul 和h3. 如果您可以发布 css 比这可能会更好。试试这个。

于 2010-05-30T07:35:04.073 回答
0

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

margin-left: auto;
margin-right: auto;
于 2010-05-30T07:50:39.780 回答
0 
#YoutubeClip {
margin: 0 auto 0 auto;
}

0 = 顶部和底部 auto = 左右

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

如果您希望将内容集中在块内而不是块本身

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

是你要找的

我建议<!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>
于 2010-05-30T14:35:11.780 回答