In this specific scenario, my goal is to centrally align the number "3" inside the "list-li" element as the adjacent element possesses a variable height. I attempted to use:
position: relative;
top: 50%;
However, this method does not yield the desired outcome.
HTML:
<ul class="list-1">
<li>
<div class="list-1-num">
3
</div>
<div class="list-1-content list-1-content-signup">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, lectus cursus cursus elementum.
</div>
</li>
</ul>
CSS:
.list-1 {
font-size: 20px;
list-style: none;
}
.list-1 li {
margin-bottom: 70px;
overflow: hidden;
text-align: left;
list-style: none;
}
.list-1-num {
float: left;
font-size: 25px;
margin-right: 20px;
}
.list-1-content {
background-position: 0 50%;
background-repeat: no-repeat;
background-size: 45px 40px;
float: left;
width: 300px;
line-height: 25px;
}
Take a look at the Codepen demonstration here: https://codepen.io/aguerrero/pen/OZevgJ