Quiero centrar los iconos verticalmente dentro del div
padre, pero no soy capaz. Mi código:
.subtaskList {
border-top: 1px solid rgba(255, 255, 255, 0.07);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 17px;
padding-top: 17px;
}
#subtaskCheck {
height: 17px;
width: 17px;
border-radius: 3.84px;
background-color: #FFFFFF;
margin-left: 20px;
margin-right: 10px;
}
.subtaskTitle {
vertical-align: 20%;
color: #FFFFFF;
font-family: Poppins-Regular;
font-size: 12px;
display: inline-block;
width: 60%;
}
.alertSubtask {
height: 23px;
width: 23px;
color: #50E3C2;
font-size: 18px;
line-height: 23px;
margin-left: -22px;
display: none;
position: absolute;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="subtaskList">
<i class="si si-bell alertSubtask" style="display: none;"></i>
<input type="checkbox" id="subtaskCheck" name="subtaskCheck" data- subtaskid="255">
<div class="subtaskTitle">qwerqwer qwerqwer xcvzxvxczv asdfasdf asdfñlasdf adsfasdfads asdfasdfasdf asdfasdfadsf adsfasdfasd asdfadsf adsfasdfadsf adsfasdfads fadsfdasf asdfasd fdasf asdfasdf asdf asdfa sdfadsf asd asdfasdf as</div>
<input type="text" class="changeSubtaskName">
<i class="fa fa-play"><span class="subtaskTime">00:00:00</span></i>
</div>
Hay que tener el cuenta que el contenido del div
subtaskTitle es aleatorio y siempre debe quedar centrado.