モバイル版のdiv（float：left;）を中心に

Question

私はfloat leftプロパティを持つdivを持っており、このdivをモバイル版の中心にしたいと思います。

私はfloat noneを入れて、メディアのクエリに/ leftを両方ともクリアしようとしましたが、何も変更されませんでした。デフォルトでは

.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要素の幅はあなたが表示して、幅が自動的に100％ではありません（display:inline-block;にこの<div>を設定する必要があり、ラッパーの幅よりも小さい場合、この<div>位置を作るために

はラッパー内部の中心地である：インラインブロック;この<div>この<div>内のコンテンツの幅に自動的に従います）。それ以降、この<div>にはギャップ（ラッパー付きのスペース）があります。左右の余白をautoに設定します。したがって、この<div>の位置はラッパーの中心に移動します。

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