Je veux savoir comment placer une image à côté d'un div et centrer le div (barre de progression) verticalement?
Ce que je veux faire:
Voici mon code pour la barre de progression:
<div class="progressbar">
<div class="skill"><span>HTML 5</span></div>
</div>
.progressbar {
background-color: black;
border-radius: 25px;
padding: 3px;
width: 200px;
}
.progressbar > div {
background-color: #FDEE18;
width: 175px;
height: 20px;
border-radius: 10px;
}
.skill span {
padding-left: 10px;
}
Vous pouvez le faire avec display: table
et display:table-cell;
comme ceci:
CSS
img { height: 60px; display: table-cell; }
#container { display: table;}
.container-progress { display: table-cell; vertical-align: middle; padding-left: 10px;}
HTML
<div id="container">
<img src="http://lorempicsum.com/futurama/350/200/1" alt="">
<div class="container-progress">
<div class="progressbar">
<div class="skill"><span>HTML 5</span></div>
</div>
</div>
</div>
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots