Centrer un texte en hauteur avec CSS, dans un menu horizontal de navigation par exemple…
Simulation : http://jsfiddle.net/frontenddeveloper/Qrz58/16/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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 comporte réellement comme un tableau HTML
Simulation : http://jsfiddle.net/frontenddeveloper/5nkFV/2/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.menu{ display: table; border-collapse: separate; border-spacing: 4px 4px; } .menu li{ display: table-cell; vertical-align: middle; text-align: center; height: 4em; padding: 4px; background: pink; border: 1px solid #000; } .menu li:hover{ cursor: pointer; background: #fff; } |
