display:table和display:table-cell结合使用

display:table和display:table-cell结合使用_第1张图片

.GoodList{
display :table;
height :54px;
width :56px;
line-height: 14px
                padding: 0 12px
.text{
display: table-cell;
                width: 56px;
                vertical-align: middle;
                font-size: 12px;
                color: rgb(77, 85, 97); 
}
 
将父容器设为display:table然他成为一个块级表格元素,子元素display:table-cell使子元素成为表格单元格,然后就像在表格里一样,给子元素加个vertical-align: middle就行了,就可以实现多行文字垂直居中

转载于:https://www.cnblogs.com/huanhuan55/p/9718481.html

你可能感兴趣的:(display:table和display:table-cell结合使用)