1

OMG、本当に私はここに何千回も来ています。この回答を抜粋します。これほど簡単なことをするのがどれほど難しいか信じられません。

<body>
    <div class="wrapper">
         <div class="class1">Page 1 of 1</>
         <div class="class1"> — </>
         <div class="class1">Next</>
    </div>
</body>

ラッパーがブラウザーの真ん中にある必要があります。中のテキストの長さや div の量は関係ありません。一体どうやってこれを行うのですか？私はここでびっくりしています。私はCSSがそれほど苦手ではありません。これをグーグルで検索すると、2005年のフォーラムの投稿が表示されます。または、幅が指定されているために回答が見つかるので、それは単なるごまかしです。

毛が抜ける！

CSS はここには入れません。機能していないだけなので、意味がありません。

ありがとう。

4

4 に答える 4

4

何かが足りないのかもしれませんが、なぜこれがうまくいかないのですか?:

.wrapper {
     text-align:center;   
}

あなたの CSS は関連性がないと言っていたので、これは簡単すぎるか、何かが欠けています。繰り返しになりますが、最も単純なソリューションが最善のソリューションである場合があります。

内側の div を特定の方法で表示する必要がある場合は、それについて言及していないため、含めませんでした。

OK は、内部の div が互いに隣り合って浮動する必要があることを指定しませんでした

OK、次にdisplay:inline内側の div で使用します。

.wrapper div {
    display:inline;
}

「しかし、私はそれらを表示する必要がありblock、フローティングする必要があります!」

OK、あとはフロートして、必要に応じて clearfix を使用してください。

.wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

これは、clearfix なしで内部 div をフローティングしても問題なく機能しますが、必要なもののモックアップを提供しなかったため、この質問への回答がより困難になります。

IMOfloatは、多くのレイアウトの問題を引き起こす可能性がある必要のない多くの状況で使用されます。それは非常によく理解されていない特性であり、定期的に悪用されています。

于 2011-04-15T04:30:44.013 に答える
3

動作中のjsfiddle：http: //jsfiddle.net/6utN2/1/

これをaでコーディングし、3つの要素にULを使用したほうがよいと思います。LI

理由は次のとおりです。これら3つをフロートさせたため.wrapper、これら3つのコンテナとして機能するdivs必要があります。ドキュメントフローからそれらを取り出します。

これによって引き起こされる問題を支配する唯一の方法は、ラッパーをラップすることです...これは、書くことができる最も無駄のない解決策ではありません。

このUL手法はここではうまく機能しますが、最初はそれほど直感的ではありませんが、これULはコンテナであり、LIすべてを左にフロートさせることができます（親の中にネストされたままになります）。最後に、単一のdivを使用して、存在する要素にまたがりUL、それを中央に配置することができます。

ps-ラッピングラッパーとして.fauxBodyを使用しました-ただ注意してください。

于 2011-04-15T06:52:40.090 に答える
0

幅を指定せずに？ラッパーで幅を指定しないと、ボディの 100% になります。幅を設定する場合、必要なものは次のとおりです。

#wrapper { width: 960px; margin: 0 auto; }
于 2011-04-15T02:56:10.377 に答える
0

はdivブロック レベルの要素であるため、ブラウザーの幅の 100% 未満になるように幅を指定する必要があります。通常、 を定義すると、 ( 、、および) をwidth使用して を中央に配置できます。margin: 0 auto 0 auto;toprightbottomleftdiv

それができない場合は、次を使用できます。

#wrapper {
    display: inline-block;
    margin: 0 auto;
}

#wrapper divをそのコンテンツの幅に縮小し、ウィンドウの中央に配置します。これは IE < 7 とは互換性がありdiv ませんdisplay: inline。

于 2011-04-15T02:56:44.237 に答える