vertical-align – devfrontend.info

[CSS] [jQuery] Une liste responsive d’éléments avec visuels de dimensions différentes alignés horizontalement et verticalement dans les cadres dans lesquels ils s’inscrivent

par admin
23/11/201523/11/2015

Une version qui gère l’alignement vertical des images responsives (fluides) en pure CSS Sources : Bootstrap vertical align responsive images example code, (mon jsFiddle) [Pure… Lire la suite »[CSS] [jQuery] Une liste responsive d’éléments avec visuels de dimensions différentes alignés horizontalement et verticalement dans les cadres dans lesquels ils s’inscrivent

[CSS][Bootstrap 3] Utiliser la propriété vertical-align avec la grille

par admin
02/07/201424/03/2017

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique… Lire la suite »[CSS][Bootstrap 3] Utiliser la propriété vertical-align avec la grille

[CSS] Aligner un texte verticalement avec display:table, display:table-cell et vertical-align:middle

par admin
04/01/201320/03/2013

Centrer un texte en hauteur avec CSS, dans un menu horizontal de navigation par exemple… Simulation : http://jsfiddle.net/frontenddeveloper/Qrz58/16/

.menu li{
    display: table;
    float: left;

    margin: 2px;
}

.menu a{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    
    width: 90px;
    height: 3.6em;
    line-height: 1.2em;
    padding: 5px;
    border: 1px solid #000;
    background: pink;
}

.menu a:hover{
    background: #fff;
}

.menu li{

display: table;

float: left;

margin: 2px;

}

.menu a{

display: table-cell;

vertical-align: middle;

text-align: center;

width: 90px;

height: 3.6em;

line-height: 1.2em;

padding: 5px;

border: 1px solid #000;

background: pink;

}

.menu a:hover{

background: #fff;

}

Une variante : le menu se… Lire la suite »[CSS] Aligner un texte verticalement avec display:table, display:table-cell et vertical-align:middle