欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

转载未知大小的图片在一个已知大小容器中的水平和垂直居中(二)

程序员文章站 2024-02-29 08:28:40
这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“centering an image of unknown size in an outer...

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“centering an image of unknown size in an outer container of known size”, 作者:stu nicholls form: ,发表日期:15th october 2006。

此文由于2006-10-17翻译发表,。

这个水平和垂直居中的例子能正常工作在ie5.x, ie6, ie7, firefox, opera, mozilla, netscape,为ie和非ie分别写了二套简单的样式。

ie使用inline-blocks,非ie使用table-cell and vertical-align。

css

/* for non-ie browsers */
div.holder {width:750px; height:300px; background:#f8f8f8; 
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}
<!--[if ie]> <style type="text/css"> /* vertical align for ie */ #edge {width:0; height:100%; display:inline-block; vertical-align:middle;} #container {text-align:center; width:100%; display:inline-block; vertical-align:middle;} </style> <![endif]-->

xhtml

<div class="holder">
<span id="edge"></span>
<span id="container"><img src="graphics/homework.jpg" alt="" /></span>
</div>

作者的例子是单个的,我扩展了下,一页6张图片,可适用于像册和产品展示等地方,。

上一篇: SpringBoot实战之SSL配置详解

下一篇: