1

首先我是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

4

2 回答 2

0

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

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

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

于 2013-07-03T12:12:27.517 回答
0

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

于 2013-07-03T12:24:06.097 回答