4

div のグループを 1 つの div の中央に配置して、このようにすることはできますか?

http://oi49.tinypic.com/1yo2dh.jpg

テーブルを使わずにできるかな。

今、私はこのHTMLを手に入れました：

<nav class="imagemenu">
    <div id="categories">
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>    
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>         
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
        <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div>
    </div>
</nav>

そしてこのCSS：

.home-menu {
    width:780px;
    height: 340px;
    margin-top:10px;
    padding: 20px;
    background-color:#CCC;
}

#categories {
    width:740px;
    height:340px;
    margin:0 auto;
    background-color:#333;
}

.cata {
    width:150px;
    height:100px;
    margin-bottom: 20px;
    float:left;
    background-color:#FFF;
    opacity:0.5;
}
.cata {
    opacity:1.0;
}

サイズはまだ依存していますが、カテゴリ div のすべてのカタを簡単に中央に配置するオプションはありますか?

overflowおよび他の関連する質問のようないくつかのオプションを試しtext-align:centerましたが、おそらくそれらを間違って使用しましたが、機能しません。

4

2 に答える 2

15

追加できtext-alignます:

#categories {
    […]
    text-align:center;
}

そして、この CSS ルールからdisplay: inline-blockを削除する必要があります。float

.cata{
    […]
    display:inline-block;
}

デモ

http://jsfiddle.net/EdHS9/

于 2013-03-12T13:07:24.813 に答える
1

はい、可能です。

インライン要素のように応答するようにdiv要素を作成するだけです。inline-blocktext-align:center

ここにデモンストレーションするフィドルがあります。

http://jsfiddle.net/

于 2013-03-12T13:07:54.603 に答える