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

1

请参阅此示例以获取有关如何实现此目的的参考。由于您的.assetInfoBody班级有一个固定的宽度，您可以.centeredItem通过对其应用规则margin:0 auto来对齐。通过也适用text-align:center于.centeredItem您，您可以始终保持图像居中。

于 2012-08-07T13:41:20.063 回答
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 回答