html - 如何在css中完成这个设计？

Question

首先我是 css 的新手所以请多多包涵 :D

我想创建这样的东西:

图像在文本的垂直中间。我尝试了我所知道的一切并做了很多试验，但这就是我得到的:

我对宽度有一些疑问，因为我想创建一个流畅的网络(使用 %)。

这是我当前的代码:

元

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

html

<div id="header">
            <a href="JakartaWikiMall.html"><img src="images/SearchByMall/btnBack.png" /></a>
            <p>Search by Mall</p>
</div>

CSS

#header{
    background: #e8c07a;
    width: 90%;
    margin: 5% 5% 10% 5%;
    border-radius: 5%;
    /*show background*/
    overflow: auto;
}

#header img {
    float:left;
    width: 15%;
    overflow: hidden;
    /* margin-top: -5%;  */
}

#header p {
    width: 50%;
    float: left;
    font-size: 100%;
}

我该怎么办？

感谢任何帮助，谢谢 :D

Answer 1

如果您在文本上设置较大的行高，则其上方和下方的空间将在顶部和底部均匀增长，使文本垂直居中。

假设您的文字是 12 像素，将行高设置为 30 像素或 2.4(无单位)应该可以解决问题。

如果不进行测试，我不能 100% 确定你的图片位置会发生什么，但我会将 #header 设置为相对位置，在其上放置一些左填充并将 img 位置设置为绝对位置，左:-10px , top: 50%;, margin-top: -5px(无论图像高度的一半)；