如何使用CSS使<h1>垂直居中？

Question

如何使用CSS使<h1>垂直居中？

7

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

我使用

h1{display: inline;}

为了使它们在同一行，但文本低于图像，图片大小为48x48px，文本大小为23px，我想将文本垂直居中到图像上，如何使用CSS实现？只需要支持Chrome。

谢谢你的回答，最终成功了：http://jsfiddle.net/tFdpW/

- wong2

6个回答

3

尝试在图片上添加vertical-align:middle;。

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

- Floern

你可以尝试使用CSS，例如在img标签中添加margin:0 8px 8px 0;。 - Floern

3

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

- jimplode

2

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

第一步：移除 display:inline 并为其添加 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;}

第三步：如果不想删除display:inline。

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

- sandeep

1

如果“logo”头部的高度正确，只需使用 CSS 的 vertical-align:middle 属性。

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

- VAShhh

我将标题的高度设置为50像素，然后将h1的垂直对齐设置为中间，但不起作用。 - wong2

您必须将其分配给图像。 - VAShhh

0

尝试使用

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

- dimanus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

这样做可以吗？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
}