我有一个div类,在左上角包含一个图标作为背景图像,在div的其余部分包含文本. div的最小高度为32px,以便显示所有图标.
当有多行文本时,线条看起来很好,因为它们将div向下拉伸的时间长于最小高度,但是当只有一行时,它不会与图标的中心垂直对齐.
有没有办法让单行垂直对齐,但是当有多行时不会弄乱它？
.test {
background-color: #98c5ff;
color: #093d80;
width: 400px;
min-height: 32px;
background-image: url("http://google.com/favicon.ico");
background-repeat: no-repeat;
padding-left: 42px;
}
最佳答案
您可以在CSS中使用display,如下所示：
.test {
background-color: #999999;
display: table; /* Add this in here. */
width: 400px;
min-height: 32px;
background-image: url("http://google.com/favicon.ico");
background-repeat: no-repeat;
padding-left: 42px;
}
.test p {
display: table-cell;
vertical-align: middle;
}
原文链接：https://www.f2er.com/css/427586.html