难以让h2元素和左/右边框对齐

Question

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

谢谢。

jsfiddle

Answer 1

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

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

您只需要将h2声明为内联显示样式，除非您希望宽度固定，在这种情况下使用内联块和宽度：

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

然后，您可以为两个跨度设置单个规则，我删除了不必要的背景的额外声明：

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

更新的小提琴：http://jsfiddle.net/QjUw2/

Answer 2

尝试使用线高属性

h2 { line-height: *font-size* }

检查CSS line-height ..