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

Question

我试着为我的文本做垂直排列。我也想确保绿色背景div需要覆盖从上到下的红色内的颜色div。目前，绿色div只覆盖90%的红色oolor div。我不知道在我的案子里发生了什么。有人能解释并帮助我吗？

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

Demo 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;
}