网页制作中如何实现图片在div内垂直水平居中
网页制作中如何实现图片在div内垂直水平居中
如果你仅仅是想让图片居中,最简单的方法是设为背景图片,如: div { width:500px;border:1px solid #f00; height:500px; background:url("/images/logos。
gif") center no-repeat } 如果要实现图片在div内垂直水平居中,代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <style type="text/css"> 。
img_v { display:table-cell !important; display:block; position:static !important; position:relative; overflow:hidden; width:400px; height:400px; border:1px solid #000; vertical-align:middle; text-align:center; } 。
img_v p { display:table-cell !important; display:block; margin:0; position:static !important; position:absolute; top:50%; left:50%; width:400px; margin-left:auto; margin-right:auto; } 。
img_v img { position:static !important; position:relative; top:auto !important; top:-50%; left:auto !important; left:-50%; } </style> </head> <body> <div class="img_v"> <p><img src="/images/logos。
gif"></p> </div> </body> </html>。