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

最新推荐文章于 2025-12-15 13:00:22 发布

转载最新推荐文章于 2025-12-15 13:00:22 发布 · 369 阅读

文章标签：

#xhtml #border #html #div

FE 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS进行网页布局的方法，通过特定的样式设置实现居中显示图像的效果。利用CSS的相对定位和绝对定位特性，可以使得图像无论在何种分辨率下都能保持良好的视觉效果。

<!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>