我在这里有一张照片可以帮助我解释我遇到的问题。
正如您从图片中看到的那样,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>
答案 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;
}