html - 难以使 h2 元素和左/右边框对齐

Question

我有一个 h2 元素，理想情况下，它应该通过它的垂直中点与其左右边界对齐。我试过 padding 和 vertical-align:middle 但似乎没有任何效果。想法？

谢谢。

jsfiddle

Answer 1

我移动了 font-size 并向 #title 元素添加了一个 line-height 声明，作为 vertical-align 属性受这些属性的影响:

#save-the-date #title {
  padding-left: 80px;
  text-align: center;
  width: 800px;
  font-size: 180%;
  line-height: 150%;
}

你只需要将 h2 声明为内联显示样式，除非你想要固定宽度，在这种情况下使用 inline-block 和一个宽度:

#save-the-date #title h2 {
  display: inline;
}

然后你可以对两个跨度有一个规则，我删除了不必要的背景额外声明:

#save-the-date #title span {
  display: inline-block;
  background: #333333;
  width: 300px;
  height: 3px;
  vertical-align: middle;
}​

更新后的 fiddle :http://jsfiddle.net/QjUw2/