0

大きなDIV内で左に浮いている各DIV内の中央に画像を配置したいと思います。

次の例では、灰色のボックス（ "assetInfoBody"）を緑色のボックス（ "assetBox"）の中央に配置します。text-align：centerとmargin：autoのほかに、ここで他に何を試すことができますか？

ここに画像の説明を入力してください

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #assets {
                background-color: orange;
                padding: 5px;
                width: 100%;
                height: 100%;
            }
            .assetbox {
                background-color: lightgreen;
                float: left;
                width: 100px;
                margin-right: 5px;
                            text-align: center;
            }

            .assetInfoBody {
                background-color: grey;
                position: relative;
                width: 80px;
                text-align: center;
            }

            .centeredItem {
                margin-left: auto;
                margin-right: auto;
                top: 0px;
            }

        </style>
    </head>
    <body>
        <div id="assets">
            <div class="assetbox">
                <div class="assetInfoBody">
                    <div class="centeredItem">
                        <img src="images/box.png"/>
                    </div>
                </div>
            </div>
            <div class="assetbox">
                <div class="assetInfoBody">
                    <div class="centeredItem">
                        <img src="images/box.png"/>
                    </div>
                </div>
            </div>
            <div class="assetbox">
                <div class="assetInfoBody">
                    <div class="centeredItem">
                        <img src="images/box.png"/>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
4

2 に答える 2

0

おそらく、次のような CSS が必要です。

#assets {
  background-color: orange;
  padding: 5px;
  width: 100%;
}
.assetbox {
  background-color: lightgreen;
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}

.assetInfoBody {
  background-color: grey;
  margin: 0 auto !important;
  width: 80px;
}

.centeredItem {
  margin-left: auto;
  margin-right: auto;
}
于 2012-08-07T13:43:25.373 に答える