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 de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :
|
1 |
.votre-tableau .votre-cellule img { width: 99.99%; } |
Source : Bootstrap: Vertical align into a Grid v2 – CodePen
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.row-table{ display: table !important; width: 100%; /*width: 102.26%;*/ /*width: calc(100% + 30px);*/ } .row-table > [class*="col-"]{ float: none !important; display: table-cell !important; vertical-align: middle; } .row-table > [class*="col-"].td-top{ vertical-align: top !important; } .row-table > [class*="col-"].td-bottom{ vertical-align: bottom !important; } |
Le mixin LESS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.row-table(){ display: table !important; width: 100%; > [class*="col-"]{ float: none !important; display: table-cell !important; vertical-align: middle; } /* > [class*="col-"].td-top{ vertical-align: top !important; } > [class*="col-"].td-bottom{ vertical-align: bottom !important; } */ } |