Question

我有一个带有固定宽度的标题标记，在某些情况下会包含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种不同的填充属性？比如，如果我将高度设置为auto，如果标头标签超过60px（2行的标准），则填充这个，但如果自动高度小于此值，然后填充这个 ....

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

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

请参阅示例。

http://jsfiddle.net/KcD3v/

非常感谢SO

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;
}

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

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

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

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

通过CSS垂直对齐带有固定高度的标题标记

1 个答案: