3

IE 5、6、7、8、およびFFで表示が正しくなるように、divのコンテンツを中央に配置しようとしています。 

<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 では、画像は左揃えになります。次のように、テキストも 1 行に 1 単語だけで左揃えになります。

このように
表示されます 。

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:centerがul ありh3ます。これよりもcssを投稿できる場合は、これが良いかもしれません。これを試してください。

于 2010-05-30T07:35:04.073 に答える
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 に答える
0

ブロック レベルの要素を中央に揃えるには、次のものが必要です。

margin-left: auto;
margin-right: auto;
于 2010-05-30T07:50:39.780 に答える