如何让图片和左边的文本框上下居中对齐？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title><style type="text/css">#my  { border:1px solid red; width:160px; height:100px; float:left;}
#img  { border:1px solid #000; float:left;}
</style><input id="my" type="text" value="我是于娜小姐"/> <img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" id="img"/>
</body>
</html>
 
<!--  让右边的图标向下一点 -->

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title><style type="text/css">
    #my { border:1px solid red; width:160px; height:100px; vertical-align:middle;}
    #img { border:1px solid #000;vertical-align:middle;}</style><input id="my" type="text" value="我是于娜小姐"/> <img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" id="img"/>
    </body>
    </html>
      

  2.   

    #my { border:1px solid red; width:160px; height:100px; float:left;}
    #img { border:1px solid #000; float:left;height:70px;margin-top:15px;}
      

  3.   

    啥样式也不用，给img加上align='absmiddle'
      

  4.   

    你说得对但是DIV这样为啥不行呢？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title><style type="text/css">
    #my1 { border:1px solid red; width:160px; height:100px; float:left; vertical-align:middle;}
    #my2 { border:1px solid red; width:160px; height:60px; float:left; vertical-align:middle;}</style><div id="my1" >sssssss</div> <div id="my2" />bbbbbbbbb</div>
    </body>
    </html>