如何在div中將居中圖像與div居中？

Question

我想在每個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>

Answer 1

請參閱此示例，以獲取有關如何實現此目標的參考。 由於您的.assetInfoBody類具有設置的寬度，因此可以通過將規則margin:0 auto應用於.centeredItem來對齊它。 通過還將text-align:center應用於.centeredItem您可以始終使圖像居中。

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 個解決方案

解決方案1
1 2012-08-07 13:41:20

解決方案2
0 2012-08-07 13:43:25

如何在div中將居中圖像與div居中？

問題描述

2 個解決方案

解決方案1 1 2012-08-07 13:41:20

解決方案2 0 2012-08-07 13:43:25

解決方案1
1 2012-08-07 13:41:20

解決方案2
0 2012-08-07 13:43:25