2016-09-07 86 views
0

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

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

如下图所示,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>

回答

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>

+0

不中间对齐文本。它与顶部对齐。 – bennygill