make元素具有它的父元素的高度

时间:2015-03-26 17:13:11

标签: css

我在这里有一张照片可以帮助我解释我遇到的问题。

enter image description here

正如您从图片中看到的那样,checkmark垂直居中于单行p,但当它到达两行或三行p时,复选标记为否更长的垂直居中。

理想情况下,我希望复选标记的高度为div的100%,以便在其下方或其上方没有文字......如果这有意义的话。

这是我目前的代码:

#container { //the individual div for each item
cursor:default;
}

#text { //id name for my paragraph tag.
cursor: auto;
font-size: 16px;
margin-right: 15px;
display: inline;
}

#checkmark{
padding-right: 10px;
height: 100%;
font-size: 16px;
z-index: 20;
cursor: pointer;
display: inline;
}

有什么想法吗?感谢。

编辑:这是我的HTML

<div id="container"><i id="checkmark" class="fa fa-check"></i><p id="text">Some text here....</p></div>

1 个答案:

答案 0 :(得分:2)

display: inline;display: table-cell;中的#checkmark更改为#text,然后将vertical-align: middle;添加到#checkmark,如下所示:

#text { //id name for my paragraph tag.
    cursor: auto;
    font-size: 16px;
    margin-right: 15px;
    display: table-cell;
}

#checkmark{
    padding-right: 10px;
    height: 100%;
    font-size: 16px;
    z-index: 20;
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
}