有很多在图像左侧垂直对齐文本的示例,但如果我尝试将文本放置在图像的右侧,这些相同的示例将不起作用。
图像左侧文本的工作示例如下:http://jsfiddle.net/rVTcv/
HTML:
<div style="height:259px;" class="how-right">
<img src="img/how-it-works/num-1.PNG" width="267px" height="259px">
<span>JivaWay has a simple system to get you in shape in just 6 weeks. And it's so easy to follow, even people who have never exercised before can do it.</span>
</div>
CSS:
.how-right img {
float:right;
margin-left:20px;
vertical-align:middle;
}
span {
height: 259px;
display: table-cell;
vertical-align: middle;
}
如果我尝试通过将图像的 float:right
属性移动到文本来移动右侧的文本,那么我不会得到预期的结果.
最佳答案
你的做法是错误的,只需将图像 float 到左侧并将边距更新到右侧即可
http://jsfiddle.net/rVTcv/140/
.how-right img {
float: left;
margin-right: 20px;
vertical-align :middle;
}
关于css - 将文本垂直对齐在图像右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25914173/