Vertikalen Text an Bild ausrichten

Question

Ich habe ein Bild links schweben, und ich möchte etwas Text auf das Bild vertikal ausrichten, so dass der Text in der Mitte des Bildes sitzt.

Irgendwelche Ideen, wie es gemacht wird? Ich habe viele Lösungen auf dieser Seite versucht, aber keine funktionieren für mich.

Wie unten gezeigt, funktioniert this solution nicht.

/* Limiting outter width to illustrate the problem */ 
 

 
.cart-helper-outer { 
 
    width: 200px; 
 
} 
 
/* Makes helper items full width */ 
 

 
.cart-helper-inner { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
/* Displays image left of text */ 
 

 
.cart-helper-inner img { 
 
    max-width: 50px; 
 
    float: left; 
 
    margin-right: 2.5%; 
 
    vertical-align: middle; /* this does not work*/ 
 
} 
 
.cart-helper-inner p { 
 
    vertical-align: middle; /* this also doesn't work*/ 
 
}

<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>

Answer 1

/* Limiting outter width to illustrate the problem */ 
 

 
img{ 
 
margin:15px 0px; 
 
} 
 
.cart-helper-outer { 
 
    width: 200px; 
 
} 
 
/* Makes helper items full width */ 
 

 
.cart-helper-inner { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
/* Displays image left of text */ 
 

 
.cart-helper-inner img { 
 
    max-width: 50px; 
 
    float: left; 
 
    margin-right: 2.5%; 
 
    vertical-align: middle; /* this does not work*/ 
 
} 
 
.cart-helper-inner p { 
 
    vertical-align: middle; /* this also doesn't work*/ 
 
}

<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>