28172 sujets

CSS et mise en forme, CSS3

Bonjour ou Bonsoir

J'utilise des petites images pour une page d'un site, qui sont situés dans une Div d'une ligne de bootstrap, mais je n'arrive pas à les centrer verticalement
upload/1510848705-67776-capture.png

Comment puis je faire svp ?
J'ai déja test un vertical-align : middle mais il ne fonctionne pas


<div class="col-md-3 col-xs-3 pictos"> 
                    <div class="col-md-2 col-xs-2">
                        <img src="images/picto/picto_best.png">
                    </div>
                    <div class="col-md-2 col-xs-2">
                        <img src="images/picto/picto_certifiant.png">
                    </div>
                    <div class="col-md-2 col-xs-2">
                        <img src="images/picto/picto_cpf.png">
                    </div>
                    <div class="col-md-2 col-xs-2">
                        <img src="images/picto/picto_elearning.png">
                    </div>
                    <div class="col-md-2 col-xs-2">
                        <img src="images/picto/picto_jeux.png">
                    </div>
                    <div class="col-md-2 col-xs-2">
                        <img src="images/picto/picto_new.png">
                    </div>
                </div>



.pictos img
{
    width: 50px;
    height: auto;
}

Modifié par OnePunch (16 Nov 2017 - 17:15)
Modérateur
et comme ceci ?


.pictos{
  display: flex;
  justify-content: space-between;
}

.pictos > *{
  margin: auto 0px;
}
Bonjour,
Si tu connais la hauteur max de tes images (ex:50px), essaye de jouer sur le line-height.

.pictos > div{
    line-height:50px;
    min-height:50px;
    vertical-align:middle; 
}