总结:让元素居中的方法

这个是没有浮动的情况下,我们可以先将要居中的块级元素设为inline/inline-block,然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素(span、img、a等),直接在其父级元素上加上属性text-align:center;即可;

前提:居中的元素必须是块级元素,如果是内联元素,需要添加属性display:block;而且元素不浮动。

该方法的优点是不需要知道元素的宽度和高度,在移动端用的比较多,因为移动端对css3新属性的兼容性比较好。 缺点:兼容性不好,只支持IE9+的浏览器

vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果;

近几年随着 jQuery、Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了开发素材,也方便了大家的开发。

jquery实现水平和垂直剧中的原理是通过jquery设置div的css,获取div的左,上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该div的宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意div的css设置要在resize()方法中完成,就是每次改变窗口大小是,都要执行设置div的css,代码如下:

此方法的好处就是不需要知道div 的具体宽度和高度,直接用jquery就可以实现水平和垂直居中,并且兼容各种浏览器。这个方法在很多的弹出层效果中应用。

更多精彩尽在这里,详情点击:http://tedacp.cn/,举重

0 Comments

Leave A Comment