如何在我的情况下进行垂直对齐

Question

我正在尝试对文本进行垂直对齐。 我还想确保绿色背景div需要在红色div内从上到下覆盖。 目前，绿色div仅覆盖红色olor 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;
}