垂直对齐不起作用

时间:2015-02-14 00:16:51

标签: css

我有几个小时寻找这个问题的解决方案,现在我要问你。 所以,我想把一个文本放在图像上。图像应向右浮动,文本向左浮动但垂直对齐。我知道我必须将图像与文本对齐,但它不起作用。这是我的代码:

CSS:

div.sale {
text-align: left;
}

div.sale img {
vertical-align: middle;
float: right;
clear: right;
}

其他部分:

<div class="sale">
<img src="imagelink" alt="" width="150" height="150">
<span style="height: 75px;">simply text</span>
</div>

如果你能帮助我,我会很高兴的!

祝你好运!

1 个答案:

答案 0 :(得分:0)

您可以将display: table
组合使用,使文本垂直居中 vertical-align: middle属性

<强>解释

  • display: table添加到外部div,建立表/表格 - 单元格关系
  • width: 100%添加到外部div - 因此它占用了父容器的整个宽度
  • display: table-cell添加到包含文字的span
  • 因为它是一个表格,span#textdiv.sale img的顺序很重要,所以我把文字放在图像之前
  • vertical-align: middle;应用于div.sale span元素

这是一个有效的演示 - http://jsbin.com/yurajijuxi/1/edit?html,output