如何在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

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

假设您的文字是12px，设置行高为30px或2.4（无单位）就可以了。

我不是100％肯定你的图像的位置会在没有测试的情况下发生什么，但我会将#header设置为相对位置，在其上放置一些左边的填充并将img位置设置为绝对值，左边：-10px ，top：50％;, margin-top：-5px（图像高度的一半）;

Answer 2

这可能是您尝试做的一个很好的起点。 http://jsbin.com/inefuj/4/