我左边有一张图像浮动,我想将一些文字垂直对齐到图像,以便文字位于图像的中间。
有任何想法如何完成?我在这个网站上尝试了很多解决方案,但没有一个适合我。
如下所示,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 :(得分: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*/
}
&#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;