6

使用したいレイアウトのアイデアはありますが、正しく動作させることができません。私は何時間も検索してきたので、ここにいる誰かが助けてくれることを願っています。

レイアウトはそうです。

1つのラッパーdivには、6つの子divが格納されます。これらの子divは、ラッパーdivのサイズに関係なく、常に中央に配置する必要があります。

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>

問題は、ブラウザのサイズが小さくなり、ボックスが左下の線にノックされた場合ですが、常に中央に配置する必要があります。これは純粋なCSSを使用して可能ですか、それともjqueryを使用する必要がありますか？

4

4 に答える 4

6

おそらく最も簡単な解決策は、float：leftスタイルをボックスから削除し、displayプロパティをinline-blockに変更することです。次に、必要なのはtext-align：ラッパーの中央に配置することだけです。

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block }
</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>

ここでコードをテストできます：http： //jsbin.com/uqamu4/edit

于 2010-10-12T10:03:58.563 に答える
3

text-align: centerラッパーとボックスで使用して、display: inline-block何があっても中央に配置される通常のテキスト要素のように動作させることができます。

警告：IE6およびIE7では機能しません。ChromeおよびFFで機能します

JSFiddleはこちら。

于 2010-10-12T10:05:45.917 に答える
0

これは、つまり8以下では機能しません。9についてはわかりませんが、使用max-widthしmin-widthているので、どちらも機能しないので、とにかく投稿します。

<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; }
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;}

</style>
</head>
<body>

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br class="clear" />
</div>

</body>
</html>
于 2010-10-12T10:05:02.650 に答える
0

私のために働いた解決策：

<style>
    body {
        /* To center the list */
        text-align: center;
    }

    #wrapper {
        /* To reset 'text-align' to the default */
        text-align: left;

        display: inline;
    }

    .box {
        display: inline-block;
    }
</style>
于 2014-07-13T18:50:49.927 に答える