将文本与图像对齐

Question

如何垂直将div内的文字与image对齐？

小提琴：http://jsfiddle.net/C6pf7/3/

编辑：我无法将display:table;或height用于div1

Answer 1

我尝试将图像作为背景放在div中，这是实现它的一种方式。虽然你可以使用

vertical-align:middle

这是前面已经问过的问题的链接。

Vertically align text next to an image?

Answer 2

使用以下代码：

<div id = "div1"  style='float:left;width:100%'>
<p align='left' >   
    <img src="http://www.loriswebs.com/html-tips/images/delphinium-close1c.jpg"
              id= "img1" style='float:left;'></img>    
    123
</p>

</div>

Answer 3

为min-height:

设置#div

像

#div1{
   text-align: center;
    vertical-align : middle;
    border: 2px solid red;
    min-height:80px;
}

Answer 4

在 css 中使用line-height:75px，然后使用div

添加新的style="clear:both;"

<强>的CSS：

#div1{
       text-align: center;
        vertical-align : middle;
        border: 2px solid red;
        line-height: 75px;   /* Add this */
}

更新了 Fiddle