14 css(已解决)图片垂直居中 父元素为relative且height未知(chrome)

来源:互联网 发布:海岛奇兵科技升级数据 编辑:程序博客网 时间:2024/06/04 23:20

1.父级元素居中:text-align:                    no


2.vertical-align:middle:                          no

div中不支持vertical-align

3.绝对定位    对于手机页面不实用


4.转换行内元素 display:inline;     lineheight:100%;         no


5 图片容器display:table-cell;  vertical-align:middle    可行


6.如果我们对subwrap进行了绝对定位,那么content也会继承了这个这个属性

虽然它不会在页面中马上显示出来,但是如果再对content进
行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上
边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去
,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中
====>这种方法很奇怪,个人感觉,对于subwrap的相对定位应该与其高度有关.
==>此方法要求supwrap实用绝对定位
问题尚未解决,最后用的是固定高度
另一个问题,子div和父div的分别自适应问题.


15/3/31
解决方案:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html

1.如何使图片在DIV 中垂直居中,用背景的方法。举例:
body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"
2.对于文本,使父级元素vertical-align:middle; 
对于单行元素,可以调整inline-height:xxx;   可以增加上下margin


0 0
原创粉丝点击