爲什麼不能在「div」中將圖像置於「float」的右側或左側？

我在嵌套div .box中附上了一個圖像。如果它沒有浮動，圖像可以精確居中到.box，但當我float它left或right中心對齊消失！我有4個不同大小的圖像，需要將它們集中在自己的.box中。我該如何解決它？爲什麼不能在「div」中將圖像置於「float」的右側或左側？

HTML

<div class="con"> 
    <div class="box"> 
     <img src="../_images/icon-test.png"> 
    </div> 
    </div>

CSS

.con { 
    width:300px; 
    height:200px; 
    background: #996600; 
} 

.box { 
    position:relative; 
    width:150px; 
    height:150px; 
    background-color: #333333; 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
    float:right; 
}

來源

2017-02-13 Manoj

你爲什麼用'如果你想中心元素float'？你要麼浮動，要麼居中，而不是兩者。 – Justinas

@Justinas，我想將圖像集中到.box div而不是div元素， – Manoj

您可以使用display: flex這一點。

將您的display: table-cell更改爲display: flex。

然後將text-align:center;和vertical-align:middle;改爲和justify-content: center;，使其垂直和水平居中。

編輯：然後，我還爲圖像添加了150像素的最大寬度，以在圖像大於圖像時阻止它從容器中展開。指向@Hkidd指出發生這種情況。

.con { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: #996600; 
 
} 
 
.box { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #333333; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    float: right; 
 
} 
 
img { 
 
    max-width: 150px; 
 
}

<div class="con"> 
 
    <div class="box"> 
 
    <img src="http://placehold.it/200x100"> 
 
    </div> 
 
</div>

來源

2017-02-13 12:56:24

那麼對於flex語法的瀏覽器支持如何呢？例如，如果OP必須支持iOS Safari，會發生什麼？ – Hkidd

@Hkidd在這裏看到 - http://caniuse.com/#feat=flexbox –

那麼如果圖像超出其父級的大小會發生什麼？ – Hkidd

說明

我認爲你必須在imgabsolute的位置，所以它會因爲.box定位絕對其父.box相對定位。由於img不在表格內，display: table-cell;也是不必要的。

這是我想出了：

.con { 
 
    background: #996600; 
 
    height: 200px; 
 
    width: 300px; 
 
} 
 
.box { 
 
    background-color: #333333; 
 
    float: right; 
 
    height: 150px; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 
.box img { 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 90%; 
 
}

<div class="con"> 
 
    <div class="box center"> 
 
    <img src="http://placehold.it/120x100"> 
 
    </div> 
 
</div>

來源

2017-02-13 13:13:39 Hkidd

那麼如果OP有不同大小的圖像會發生什麼？ –

@CalvT你是對的，我有4個不同大小的不同圖像，放在4個盒子裏。 – Manoj

如果你有一個形象的問題，你可以使用line-height解決方案，它會將圖像準確地在中心.box div &在圖像上使用vertical-align: middle。適用於所有瀏覽器&簡單易懂。

參考代碼：

.con { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: #996600; 
 
} 
 
.box { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #333333; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    float: right; 
 
    line-height: 150px; 
 
} 
 
img { 
 
    height: 60px; 
 
    vertical-align: middle; 
 
}

<div class="con"> 
 
    <div class="box"> 
 
    <img src="http://www.w3schools.com/css/img_fjords.jpg"> 
 
    </div> 
 
</div>

來源

2017-02-13 13:57:16 nashcheez

爲什麼不能在「div」中將圖像置於「float」的右側或左側？

回答

相關問題