css实现div中的图片自动上下左右居中

时间:2022-03-29 06:02:08

要想让图片左右对齐,我们可以在div里写入”style:text-align:center;”

大部分人可能会考虑使用vertical-align:middle来使图片居中,加上去看看没有出现效果,这里我们针对图片设置如下代码:

style=”_margin-top: expression(( 300 - this.height ) / 2);

发现在IE6下效果实现了,再看看IE7和firefox, 没有变化,这里我们针对IE7和firefox来设置,在div里写入

line-height:300px;vertical-align:middle,

发现IE7这时候也有效果了,这里的line-height:300px;是根据div的高度定的.那么,这时候IE解决了

看一下firefox图片还没垂直居中,再对div增加样式:display:table-cell,现在再看看firefox也好了。

参考代码:

< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
< img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression(( 300 - this.height ) / 2);” />
< /div >

完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>
 <body>
    <div style="width:200px;height:200px;border:1px solid #ffccaa;line-height:200px;text-align:center;vertical-align:middle;font-size:15px;font-size:0;display:table-cell">
        <img src="http://www.tea.com/Uploads/user/17/13661834326440.jpg" height="50" width="50" align="middle" style="_margin-top:expression((200-this.height )/2);"/>&nbsp;
    </div>
 </body>
</html>