div中图片居中

最新推荐文章于 2021-08-04 10:08:38 发布

原创最新推荐文章于 2021-08-04 10:08:38 发布 · 935 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#div #xhtml #html #url

HTML/CSS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了两种使图片在网页中水平及垂直居中的方法。一种适用于已知图片尺寸的情况，另一种则针对背景图片的居中显示。这两种方法均利用了CSS样式进行布局调整。

方法一：

已知图片大小

<div style="width:128px;height:128px;background-color:cyan;text-align:center;position:relative;"> <img style="position:absolute; left:50%; top:50%;margin:-8px 0 0 -8px;" src="http://bbs.blueidea.com/images/smilies/default/eek.gif" mce_src="http://bbs.blueidea.com/images/smilies/default/eek.gif"></div> -8px是图像寬高的一半

方法二：（针对背景图片居中）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div里面图片垂直居中的几个例子</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> * {margin:0;padding:0;} div { width:500px;border:1px solid #666; height:500px; background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat }</style> </head> <body> <div></div> </body> </html>

更详细的说明另见：http://www.hibloger.com/article.asp?id=75