css完成的让照片竖直垂直居中的方式

2020-10-25 16:25 jianzhan

下图是理想化中的实际效果图,外界器皿的宽度和高宽比是固定不动的,正中间的照片宽度和高宽比未知,可是照片要自始至终要相对外界的器皿竖直垂直居中。

可是具体中完成的实际效果其实不是很完善,因为各访问器的分析都不尽相同,因此各访问器都会有1px⑶px的误差。

方式1 (XHTML 1.0 transitional):

该方式是将外界器皿的显示信息方式设定成display:table,img标识外界再嵌套循环1个span标识,并设定span的显示信息方式为display:table-cell,这样便可以很便捷的应用vertical-align象报表元素那样对齐了,自然这只是在规范访问器下,IE6/IE7还得应用精准定位。

HTML构造一部分:

<div id="box">
    <span><img src="images/demo.jpg" alt=""></span>
</div>

CSS款式一部分:

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:⑸0%;top:⑸0%;
}
</style>
<![endif]-->

方式2 (XHTML 1.0 transitional):

方式2和方式1的完成的基本原理大同市小异,构造也是同样的,方式1用的是标准注解,方式2就用的CSS Hack。

CSS款式一部分:

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*对于IE6/7的Hack*/
top:50%; /*对于IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*对于IE6/7的Hack*/
top:⑸0%;left:⑸0%; /*对于IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

该方式有个缺点,在规范访问器下因为外界器皿#box的显示信息方式为display:table-cell,因此致使#box没法应用margin特性,而且在IE8下设定边框也失效。

方式3 (XHTML 1.0 strict):

规范访问器還是将外界器皿#box的显示信息方式设定为display:table-cell,IE6/IE7是运用在img标识的前面插进1对空标识的方法。

HTML构造一部分:

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS款式一部分:

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
#box img {
    vertical-align:middle
    }
</style>
<![endif]-->

方式3也一样可用XHTML 1.0 transitional。以上方式全是搜集于脚本制作之家,临时只对这3个方式较为令人满意,适配性层面非常好,应用起来的限定也较为小,也有些方式我也都11检测过,实际效果都没理想,在各访问器中的差别较为大。此外司徒正美这里也搜集了1些方式。

思索:许多方式全是依靠于将外界器皿的显示信息方式设定成table才可以完成竖直垂直居中,也便是div来仿真模拟table,假如CSS有1个特性来完成这类实际效果那该多好。假如你也是有好的方式,欢迎你来共享。

原文:http://stylechen.com/img-middle.html