1

我有一个固定宽度的标题标签，在某些情况下将包含 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 个不同的填充属性？就像，如果我将高度设置为自动，并且如果标题标签超过 60 像素（这将是 2 行），则将填充设为this，但如果自动高度小于该高度，则将填充设为this .. ..

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

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

请看例子。

http://jsfiddle.net/KcD3v/

非常感谢所以

4

1 回答 1

2

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

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

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

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

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

另一种方法可能是将vertical-align代码更改为line-height设置为<h1>元素的高度，但在这种情况下，您将仅限于单行文本。

于 2013-02-04T21:51:48.147 回答