Center a div (float: left;) dans la version mobile

Question

J'ai une div avec la propriété float left et je veux centrer cette div dans la version mobile.

J'ai essayé de mettre float none et effacer les deux/left à l'intérieur de la requête média mais rien n'a changé.

Voici le code:

.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

Par défaut. Le style d'affichage <div> est block. il s'adaptera à 100% de largeur de l'emballage et la hauteur est automatique.

Pour rendre cette position <div> est le centre intérieur de l'enveloppe si largeur de div est plus petite que la largeur d'emballage vous devez définir ce <div> à display:inline-block; (si la largeur n'est pas 100% automatique avec affichage: inline-block, ce <div>. suivra la largeur du contenu à l'intérieur de ce <div> automatiquement). Donc après cela, ce <div> aura un espace (espace avec un wrapper). Maintenant, définissez les marges gauche et droite comme auto. Donc, la position de ce <div> ira au centre de l'emballage.

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