Question

我希望在每个DIV中居中放置一个图像，该图像在较大的DIV中左移。

在下面的示例中，我希望灰色框（“assetInfoBody”）在绿色框（“assetBox”）中居中。我还可以在text-align：center和margin：auto？

旁边尝试什么

enter image description here

<!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>

Answer 1

请参阅this example以获取有关如何实现此目的的参考。由于您的班级.assetInfoBody类具有设定的宽度，因此您可以通过将.centeredItem规则应用于margin:0 auto来对齐text-align:center。通过将.centeredItem应用于{{1}}，您可以始终将图像置于其中心。

Answer 2

可能你想要这样的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;
}

如何在div中居中带有居中图像的div？

2 个答案: