html - 垂直对齐文本和其他元素适用于页眉，但不适用于页脚

Question

我想创建一个简单的页眉/内容/页脚布局，这已经被问过数百次了，我找到了一个我真正喜欢的布局。我创建了 a jsFiddle展示了这种方法。除 <footer> 外一切正常标签。

基本上，我尝试使用 footerElement定义类似于

header.headerElement:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  float: left;
}

在 <footer> 中完成垂直对齐的文本元素和其他内容，但它不起作用。因为我不明白 :before 是什么headerElement 确实有技巧类，我认为问题在于我只是复制它并期望它起作用。但我无法自己找到如何在页脚中做同样的事情。我必须更改/添加什么才能使我的内容在页脚中也垂直对齐？对文本完成此操作就足够了，因为我认为无论如何都不会在那里使用其他任何东西(图像)。

此外，我注意到 color: red如果放在上面 header.headerElement:before 里面什么都不做堵塞。这与问题有关吗？

Answer 1

Demo Fiddle

将 line-height: 30px; 添加到您的页脚 CSS，子项的垂直对齐方式相对于父项的行高。

因为您在子项上设置了 vertical-align:middle (:before)，所以他们需要建立对齐参数，使用 line height 建立.因此，将其设置为与父级的高度相同将按预期垂直对齐它们。