图片垂直居中的妙法[兼容]

最新推荐文章于 2024-09-11 14:09:02 发布

frontend

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量321

点赞数

分类专栏： FE 文章标签： xhtml border html div

FE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
div { border:1px solid #000; width:300px; height:300px; text-align:center; position:relative; display:table-cell; vertical-align:middle; }
p { +position:absolute; top:50%; }
img { +position:relative; top:-50%; left:-50%; }
</style>
</head>
<body>
<div>
<p><img src="http://www.phpfans.net/ask/fansa1/images/smilies/default/biggrin.gif"></p>
</div>
</body>
</html>