html - 在我的案例中如何进行垂直对齐

Question

我正在尝试对我的文本进行垂直对齐。我还想确保绿色背景 div 需要从上到下覆盖红色 div 内。目前，绿色 div 仅覆盖了红色 oolor div 的 90%。我不确定我的情况发生了什么。任何人都可以解释并帮助我吗？

html

<div id='wrapper'>
   <div class='head'></div>
   <h2 class='title'>Warm-Up</h2>
</div>

CSS

.title{
    display: inline;   
    padding-left: 15px;
    vertical-align: middle;    
    margin: 0;
}

.head{
    width: 30px;
    height: 50px;
    display: inline-block;
    background-color: #A9D075;
}

#wrapper{
    width:200px;
    background-color: red;
}

http://jsfiddle.net/rmS2f/3/

谢谢。

Answer 1

演示 http://jsfiddle.net/rmS2f/6/

您的 html 结构可以工作，但您需要更改样式:

.title {
    display: inline-block;
    padding-left: 45px;
    vertical-align: middle;
    margin: 0;
    line-height:50px;
}
.head {
    position:absolute;
    left:0;
    width: 30px;
    height: 100%;
    display: inline-block;
    background-color: #A9D075;
}
#wrapper {
    position:relative;
    width:200px;
    height:50px;
    background-color: red;
}