I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me.
Despite following the suggestions provided in this particular solution, I still encounter issues.
/* To illustrate the problem, limiting outer width */
.cart-helper-outer {
width: 200px;
}
/* Making helper items full width */
.cart-helper-inner {
width: 100%;
float: left;
}
/* Aligning image to the left of the text */
.cart-helper-inner img {
max-width: 50px;
float: left;
margin-right: 2.5%;
vertical-align: middle; /* Unfortunately, this doesn't work */
}
.cart-helper-inner p {
vertical-align: middle; /* This also proves to be ineffective */
}<div class="cart-helper-outer">
<div class="cart-helper-inner">
<img src="http://placehold.it/50x50" />
<p>Secure checkout with bank grade encryption</p>
</div>
<div class="cart-helper-inner">
<img src="http://placehold.it/50x50" />
<p>Secure checkout with bank grade encryption</p>
</div>
<div class="cart-helper-inner">
<img src="http://placehold.it/50x50" />
<p>Secure checkout with bank grade encryption</p>
</div>
</div>