0

I've got an image floated left, and I want to vertically align some text to the image so that the text sits in the middle of the image.

Any ideas how it's done? I have tried many solutions provided on this site, but none are working for me.

As shown below, this solution does not work.

/* 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>
Community
  • 1
  • 1
TinyTiger
  • 1,801
  • 7
  • 47
  • 92

1 Answers1

0

/* 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>
Ganesh Putta
  • 2,622
  • 2
  • 19
  • 26