J'essaie de centrer une image et un calque div à l'intérieur d'un div contenant, mais pour l'instant je ne peux pas le déplacer à partir de la gauche de la colonne. J'ai essayé différentes méthodes mais je n'arrive tout simplement pas à le faire bouger. Même l'astuce automatique des marges ne fonctionne pas, ce qui, je suppose, est dû au fait que bootstrap 4 est maintenant une boîte flexible.
HTML :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="user" class="col-12">
<div class="col-12" id="user-avatar">
<img class="mx-auto d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
<p id="username" class="text-center"><span>Howdy </span>Liane</p>
<div id="xp-bar" class="text-left">
<div id="xp"><p><i class="fas fa-stars"></i> XP</p></div>
</div>
<p id="stats" class="text-right">Level 1</p>
</div>
#user-avatar {
background: #ff4e00;
border-radius: 50%;
width: 250px;
margin-bottom: 25px;
position: relative;
}
#user img {
border-radius: 50%;
width: 250px;
transition: .5s ease;
backface-visibility: hidden;
}
#user-avatar:hover img {
cursor: pointer;
opacity: 0.3;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.middle i {
font-size: 34px;
}
#user-avatar:hover .middle {
opacity: 1;
cursor: pointer;
}
C'est l'image et la "sous-couche" (div "du milieu") dont j'ai besoin pour être au centre.
3 Réponses :
Ajouter une classe sur id = "user-avatar" à mx-auto
<div class="col-12 mx-auto" id="user-avatar">
<img class="d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
Toujours à gauche :(
Ajoutez margin-left: 50% et transform: translateX (-50%) à # user-avatar . Vérifiez le lien ci-dessous.
merci
ajoutez simplement ce style - centrd maintenant
#user-avatar {
margin: 0 auto;
}