居中移動版本中的div（float：left;）

Question

我有一個帶浮動左邊屬性的div，我想將此div居中置於移動版本中。

我試圖把float none和清除兩個/留給媒體查詢，但沒有任何改變。

這是代碼：

.img-head { 
 
    float: left; 
 
    margin: 10px; 
 
} 
 

 
@media (min-width: 768px) and (max-width: 980px) { 
 
    .img-head { 
 
    clear: both; 
 
    text-align: center; 
 
    float: none; 
 
    } 
 
} 
 

 
@media (max-width: 767px) { 
 
    .img-head { 
 
    clear: both; 
 
    text-align: center; 
 
    float: none; 
 
    } 
 
}

<div class="img-head"> 
 
    <img src="/nutickets2/images/evento-1.png"> 
 
</div>

Answer 1

默認情況下。 <div>顯示樣式爲block。它將適合100％寬度的包裝，並且高度是自動的。

爲了使這個<div>位置是在包裝內中心如果寬度的div比包裝寬度應該設置這個<div>到display:inline-block;（所以寬度不是100％自動帶顯示：內聯塊;這<div>。將自動跟隨此<div>內的寬度）。所以在這之後，這個<div>將會有一個空白（帶有封裝的空間）。現在左右邊距設置爲auto。所以這個<div>的位置將會進入包裝的中心。

.img-head { 
    display:inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    clear: both; 
    text-align: center; 
    float: none; 
    }