css - 通过 CSS 垂直对齐具有固定高度的 header 标签

Question

我有一个 header 标签，宽度固定，在某些情况下会包含 2 行文本，在某些情况下会包含 1 行。我希望它们在中心垂直对齐，就好像填充已经计算好了一样来弥补这一点。

我希望在不修改标记的情况下完成此操作。

<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>
<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>
<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>
<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>

CSS:

h1 {
float:left;
margin:5px;
padding:5px;
width:100px;
height:50px;
vertical-align:middle; /*obvi doesn't work because it's not an inline element */
text-align:center;
background:#336699;
color:#fff;
}

也许...就像一个 CSS 选择器，它根据自动高度确定 2 个不同的填充属性？比如，如果我将高度设置为自动，并且如果 header 标签超过 60px(2 行的宽度)，则填充 this，但如果自动高度小于该高度，然后使填充这个....

h1[height>60px] { padding:10px 0px; }
h1[height<60px] { padding:20px 0px; }

我希望这是有道理的。我只是不确定如何写...或者有更好的方法吗？

请看例子。

http://jsfiddle.net/KcD3v/

太感谢了

Answer 1

你可以尝试做这样的事情:

HTML

<div class="header">
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
</div>

CSS

.header {
    display: inline-table; /* IE8+, Chrome, FF3+, Opera7+ */
}

h1 {
    display: table-cell;
    margin:5px;
    padding:5px;
    width:100px;
    height:50px;
    vertical-align: middle;
    text-align:center;
    background:#336699;
    color:#fff;
}

通过这种方式，您可以在不破坏网站语义的情况下使用表格。看MDN有关 display 的更多详细信息和表格样式。

但是，通常只有一个 <h1>每页元素用于定义网站的页面标题，然后是 <h*> 的所有其他组合元素。

如果您不需要跨浏览器兼容性(例如，如果您正在开发一些 Chrome/Firefox 扩展程序/webapp)，即使是新的 flexbox可能是一个有趣的选择。

---

另一种方法是更改​​ vertical-align在您的代码中使用 line-height设置为你的 <h1> 的高度元素，但在这种情况下，您只能使用一行文本。