Html 在div内以虚拟方式对齐图像和文本

我正在尝试创建一个30像素高的div，其中有一个图像和一个跨度与同一车道对齐

div{
高度：30px；
宽度：80px；
外形：1px纯黑；
}
.形象{
高度：16px；
垂直对齐：中间对齐；
}
跨度{
垂直对齐：中间对齐；
}

地点

要使元素垂直居中，请使用

：：在
伪元素之前，然后使其
内联块
，与其父元素的高度相同，并且
垂直对齐：中间


div{
高度：30px；
宽度：80px；
外形：1px纯黑；
}
div：：之前{
显示：内联块；
内容：''；
身高：100%；
垂直对齐：中间对齐；
}
.形象{
高度：16px；
垂直对齐：中间对齐；
}
跨度{
垂直对齐：中间对齐；
}

地点