div水平居中

1、先给它外层的div定位并left:position:absolute;left:50%;

2、获取当前元素div的宽度,并除以2

3、改变它的css:margin-left:-(获取当前元素div的宽度除以2)。

function width(obj){
        obj.each(function(){
            var pagingWidth=$(this).width();    //分页div水平居中
            $(this).css(‘margin-left‘,-pagingWidth/2);
        });
    }
width();
时间: 2024-11-18 14:19:01

div水平居中的相关文章

div居中代码 DIV水平居中显示CSS代码

如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto:其两个样式需要配合使用才能实现div盒子的居中显示排版. 首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中. 实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为".div&

如何让div水平居中

如何让div水平居中: 让整个div水平居中的使用相当频繁.例如,一般情况下都是让网页页面在浏览器中水平居中. 代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</

CSS中怎么让DIV水平居中

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. text-align:center;这个属性不是让div居中的,是让div中的内容居中, 当我们想让一个容器中的div水平居中其实方法很简单只需定义margin就行了,即margin:0 auto;然后你的div就水平居中了. 如下代码例子: box2在box1中水平居中: <!DOCTYPE html><html> 

CSS让div水平居中实例代码

CSS让div水平居中实例代码:在布局中,往往希望一个div是水平居中的,对于如何让div水平居中,稍有经验的人员都不成问题,只需要一句代码就可以搞定,但是初学者往往可能不清楚,废话不多说了,直接给出代码. .box { width:200px; height:200px; margin:0px auto; } 在这里必须要注意的是,div宽度必须要认为的设置,否则无法设置居中. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=

CSS实现DIV水平居中和上下垂直居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>上下垂直居中 在线演示 DIVCSS5</title> <style> #main { position: absolute; width:400px; height:200px; left:50%; top:50%; margin-left:-200px; margin-top:

未知高度定宽div水平居中及垂直居中(兼容ie6及其他牛逼浏览器)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1

div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度的话,用padding,margin都很容易实现.方法有很多种.不过经常遇到这种div没有固定的宽度高度的情况,我们就不能用margin,padding设置固定的距离了.这个问题让很多人头疼.而怎么样才能让这个div居中显示呢?其实这种情况解决的办法也是有很多种,js,css都可以实现. 1.先来看

div水平居中和垂直居中

水平居中和垂直居中 水平居中包含两种情况:        块级元素的水平居中:margin:0px auto;        文字内容的水平居中:text-align: center;        垂直居中:        常见的单行文字的垂直居中可设置文字所在行的height与        行高样式属性一致,比如:        div{            width: 400px;            height: 400px;            line-height: 4

如何让div水平居中呢?

一百度div居中,多数都是一个答案,但是有时候这种方法并不是万能的...不废话,将我知道的方法都列举一下好了,随时更新. 1.设置width值,指定margin-left和margin-right为auto(或margin: 0 auto;)(多数人都知道的方法,就不举例子了) 2.设置width,利用margin-left为width的负一半和相对定位实现水平居中(width和margin-left可以设置百分比) 1 #demo { 2 width:500px ; 3 height:300p