html - 垂直对齐 : middle without using display: inline-block

Question

我正在尝试使文本显示为所附图片中所示。请在这里查看我到目前为止所做的事情(包括代码):http://jsfiddle.net/FLb6K/1/

我不能使用的原因display: inline-block是因为我希望能够使用 float 轻松地从 CSS 更改元素的位置，而无需触及 HMTL| .

比如上图，有两个<div> s:一个有图片，一个有文字。使用 CSS float我可以通过添加 float: left 使图像出现在左侧

Answer 1

使用以下代码:

<style>
div{border:solid 1px #000000; margin:5px; padding:5px;}
.maindiv{min-width:100px;height:300px;display:table-cell;vertical-align:middle;}
.div1{display:table-cell; vertical-align:middle;}
.div2{display:table-cell; vertical-align:middle;}
</style>

<div class="maindiv">
    <div class="div1">text</div>
    <div class="div2"><img class="div2" width="240" src="http://upload.wikimedia.org/wikipedia/commons/a/a5/ISO_639_Icon_hi.svg"></div>
</div>