html - CSS:如何在响应图像的右侧垂直对齐跨度中的文本(也在跨度中)

Question

我正在尝试将文本垂直对齐到图像旁边(两者:文本和图像都在另一个容器包含的 span 元素中)。如果我将图像设置为固定大小，一切都会按预期工作(vertical-align: middle 完成它的工作)。如果我让它响应，文本不再垂直对齐。我在这里做错了什么？

body {
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5vw;
    font-size:  2vmin;
}

#first_header {
    background-color: #f2f2f2;
    padding: 0.5em;
    font-weight: bold;
    display: inline-block;
    }

#img_header {

    width: 60%;
    display: table-cell;
}

header span {
    width: 30%;
    font-size: 20px;
    font-size: 1.5vw;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: left;

}

---

<header id="first_header">
        <span>
            <img id="img_header" src="img/logo.png" alt="">
        </span>
        <span>
            Test
        </span>
    </header>

Answer 1

您可以尝试使用 transform 属性来解决您的文本问题，代码如下:

transform: translateY(-50%);