垂直对齐文本到图像

时间:2016-09-07 13:36:56

标签: html css

我左边有一张图像浮动,我想将一些文字垂直对齐到图像,以便文字位于图像的中间。

有任何想法如何完成?我在这个网站上尝试了很多解决方案,但没有一个适合我。

如下所示,this solution不起作用。

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

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
/* 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*/
}
&#13;
<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>
&#13;
&#13;
&#13;