html - 图片居中但文字在图片下方

Question

使用此 css 我能够将图像居中，但是，图像现在漂浮在文本之上。最初我将顶部设置为 0，但这些尺寸使图像正确居中。我该怎么做才能将下一行文本保留在图片下方而不是图片下方？

img.center {
    position: absolute;
    top: 40px; bottom:50px; left: 105px; right:105px;
    margin: auto;
}

Answer 1

绝对定位使图像“脱离流动”。为了将其保留在文档流中，您可以使用类似的东西:

如果你知道 parent 的高度:

.parent {
    line-height: 100px;
}
.parent img {
    vertical-align: middle;
}

如果你不知道高度:

.parent {
    display: table;
}
.parent img {
    display: table-cell;
    vertical-align: middle;
}