Question

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

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

1 个答案: