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

您可以将margin-top和margin-bottom设置为calc(50% - calc(16px / 2))，其中16px是字体大小。

Answer 2

您可以尝试使用transform属性使用下面的文本代码解决问题：

transform: translateY(-50%);

Answer 3

使用flexBox：

header{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
}

CSS：如何在响应图像旁边（也在跨度中）在跨度中垂直对齐文本

3 个答案: