获取h2元素和左/右边界对齐

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

谢谢。

jsfiddle

来源

2012-12-29 AMC

你的意思是李那些横条应该在h2的中间？ –

@HankyPanky对齐中间，是的。 – AMC

可能的重复http://stackoverflow.com/q/9468923 –

尝试使用行高属性

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

检查CSS行高..

来源

2012-12-29 19:06:45 Prasanth

我搬到了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/

来源

2012-12-29 19:08:54

谢谢你的深思熟虑的答案;你所说的话是有道理的。但是，当我在网站上实现它时，我没有注意到任何更改。 simplyelegantweddingshowcase.com/ 任何想法如何使它一切工作？ – AMC

如果您已经根据需要放置所有属性（重要的属性是显示和垂直对齐属性以及声明font-size和line-height属性的哪些元素），则必须能够检查代码来尝试修复它，我没有任何想法，我的头顶... –

获取h2元素和左/右边界对齐

回答

相关问题