Question

<header id="logo">
    <img src="logo.png" />
    <h1>Some text here</h1>
</header>

我用

h1{display: inline;}

使它们在同一行，但文字低于图像，图像是48x48px，文本大小是23px，我想让文本以图像为中心，我怎么能用CSS做到这一点？只需要支持Chrome。

感谢您的回答，终于明白了：http://jsfiddle.net/tFdpW/

Answer 1

喜欢这个？ http://jsfiddle.net/xs4x6/

<header id="logo">
    <img src="http://dummyimage.com/48x48/f0f/fff" />
    <h1>Some text here</h1>
</header>

header img {
    vertical-align: top
}

h1 {
    display: inline;
    font-size: 23px;
    line-height: 48px
}

Answer 2

尝试将vertical-align:middle;添加到图片中。

示例：http://jsfiddle.net/Uxs7w/

Answer 3

h1{display: inline;line-height:48px;}

Answer 4

@ wong2;首先。 inline属性不支持垂直边距，填充属性。因此，还有其他选项。

首先：删除display:inline＆amp;给float。

img, h1{float:left;}
h1{margintop:15px; margin-left:10px;}

第二：给display:table。

#logo{display:table}
img, h1{display:table-cell}
h1{vertical-align:middle;}

thrid：如果不想删除display:inline。

h1{display: inline;line-height:48px;}

Answer 5

如果“logo”标题的高度合适，只需使用css vertical-align:middle属性

即可

http://www.w3schools.com/css/pr_pos_vertical-align.asp

Answer 6

尝试使用

h1 {
display: table-cell;
vertical-align: middle;
}

使用CSS使<h1>垂直居中？</h1>

6 个答案: