无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

网页页面制作案例:照片真实垂直居中的方式

时间:2021-03-02 01:09来源:未知 作者:jianzhan 点击:
下面的图是理想化中的实际效果图,外界器皿的总宽和高宽比是固定不动的,正中间的照片总宽和高宽比不明,可是照片要自始至终要相对性于外界的器皿竖直垂直居中。可是具体中完
下面的图是理想化中的实际效果图,外界器皿的总宽和高宽比是固定不动的,正中间的照片总宽和高宽比不明,可是照片要自始至终要相对性于外界的器皿竖直垂直居中。

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

方式一 (XHTML 1.0 transitional):

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

HTML构造一部分:

 


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

CSS款式一部分:

 


*position:relative; /*对于IE6/7的Hack*/
top:-50%;left:-50%; /*对于IE6/7的Hack*/
border:1px solid #ccc;
}
/style


该方式有一个缺点,在规范访问器下因为外界器皿#box的显示信息方式为display:table-cell,因此造成#box没法应用margin特性,而且在IE8内设置外框也失效。 (责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信