html - 无法让 h2 元素和左/右边框对齐

Question

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

谢谢你。

jsfiddle

Answer 1

我已移动 并向元素font-size添加了line-height声明，因为该属性受以下属性的影响：#titlevertical-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;
}​

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

Answer 2

尝试使用行高属性

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

检查 CSS 行高..