Allow me to illustrate the issue with a visual aid.
In the provided image, you can observe that the checkmark is perfectly centered vertically in the one-line p element. However, as the text extends to two or three lines within the p element, the checkmark loses its vertical centering.
Ideally, I would prefer the checkmark to occupy 100% of the div's height, ensuring there is no text above or below it... if that explanation makes sense.
Below is the snippet of my current code:
#container { //specific div for each item
cursor: default;
}
#text { //paragraph tag ID
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;
}
Any suggestions? Thank you.
Update: Here is the HTML section
<div id="container"><i id="checkmark" class="fa fa-check"></i><p id="text">Some text here....</p></div>