图片垂直水平居中

iteye_5904

于 2009-12-13 00:50:55 发布

阅读量142

点赞数

分类专栏： Div / Css / XML / HTML5 文章标签： CSS IE Opera .net

本文链接：https://blog.csdn.net/iteye_5904/article/details/81799307

版权

Div / Css / XML / HTML5 专栏收录该内容

177 篇文章

订阅专栏

本文介绍了一种使图片在未知高度情况下实现垂直与水平居中的方法。通过特定的CSS样式设置，如display: table-cell和vertical-align: middle等属性，使得图片能够在指定区域内准确居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片垂直水平居中 image center

在不知道图片具体高度的情况下，使其垂直和水平都居中

<div id="photo">powered by 25175.net

<img src="../../../../images/img01.jpg" alt="something" />

</div>

CSS代码：

<style type="css/text">

*{ margin:0; padding:0; }

body{ font:12px/150% Verdana, Arial, Helvetica, sans-serif; }

#photo{

           display:table-cell;/* for not IE browsers*/

         text-align:center;

         vertical-align:middle;
height:300px;
width:400px;
+display:block;
+font-size:270px;/* 这里是height*0.9,估计在0.9左右比较接近FF和Opera*/
+font-family:"Times New Roman", Times, serif;/* Don't miss here!*/
}

img{ vertical-align:middle; }

</style>

有兴趣的朋友可以更改div的高度和图片试试...