这种CSS+div盒子居中为什么行不通

CSS中让DIV居中的代码
作者:佚名
字体:[ ] 来源:互联网 时间:05-04 00:56:31
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实验得出以下结论: 正确的也是对页面构造没有影响的设置如下: 对需要水平居中的DIV层添加以下属性: 代码如下: margin-left: margin-right: 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样. 问题到底出在哪里呢? 感谢网友乐天无用帮忙找出了这个邪门问题的原因. 原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档. 问题并不在CSS而在XHTML网页本身. 需要加上这样的代码才能使得上述设置有效果: 代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& 如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档. 以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版. 如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN:} #center { MARGIN-RIGHT: MARGIN-LEFT: } 或者 我们常用margin简短写法 代码如下: body {TEXT-ALIGN:} #center { margin:0} 说明: 首先在父级元素定义TEXT-ALIGN:这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上&MARGIN-RIGHT:MARGIN-LEFT: & 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只 要在每个拆出的div里定义MARGIN-RIGHT:MARGIN-LEFT: 就可以了。 如何使图片在DIV 中垂直居中,用背景的方法。举例: body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-} 关键就是最后的center,这个参数定义图片的位置。还可以写成&top left&(左上角)或者&bottom right&等,也可以直接写数值&50 30& 如何使文本在DIV中垂直居中 如果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:
body{TEXT-ALIGN:}
#center{ MARGIN-RIGHT:
MARGIN-LEFT:
height:200
background:#F00;
vertical-align:
line-height:200
&div id="center"&&p&test content&/p&&/div&
提示:您可以先修改部分代码再运行说明: vertical-align:表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200然后插入文字,就垂直居中了。 CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中 代码如下: &style type="text/css" media=screen& body { text-align: } #a { width: 200 height: 400 background: #000; } #b { margin-top: expression((a.clientHeight-50)/2); width: 50 height: 50 background: #FFF; } #c { position: left: expression((body.clientWidth-50)/2); top: expression((body.clientHeight-50)/2); width: 50 height: 50 background: #F00; } &/style& &div id="a"& &div id="b"&&/div& &/div& &div id="c"&&/div& 另一方法: 通过css的expression,比较占客户端cpu,不建议使用 代码如下: &div style="background:position:left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"&&/div& 二,用JS使层居中 把如下代码加入&body&区域中 代码如下: &DIV id=L1 style="HEIGHT: 107 LEFT: 341 POSITION: TOP: 585 WIDTH: 205 Z-INDEX: 1"& &TABLE bgColor=#ffffff border=1 borderColorDark=#ffffff borderColorLight=#000000 cellPadding=0 cellSpacing=0 width="100%"& &TR& &TD height=1 width=178&素材网&/TD& &TD align=middle onclick="L1.style.visibility='hidden'" style="CURSOR: hand" width=21&х&/TD&&/TR& &TR vAlign=top& &TD colSpan=2 height=91&欢迎光临本站!本站域名:&a href="http://www.jb51.net" target="_blank"&http://www.jb51.net&/a& &/TD&&/TR&&/TABLE&&/DIV& &SCRIPT LANGUAGE="JavaScript"& function moveit() //这个函数用于把层放到浏览器中间 { L1.style.left=((document.body.offsetWidth-parseFloat (L1.style.width))/2) document.body.scrollL L1.style.top=((document.body.offsetHeight-parseFloat (L1.style.height))/2) document.body.scrollT } window.onload= //网面打开时时执行moveit() window.onresize= //当调整浏览器大小时执行moveit() window.onscroll= //当拉动滚动条时执行moveit() &/SCRIPT& 三,用定位方法居中 &div style=&background:#f00; width:740 height:340 left:50%; margin:0px 0 0 -370 position:&& 解释:这个方法以前只是知道,但一次一个朋友问我方法的原理,那时我没有答上来,前几天看了一文章后才突然明白了它的原理!以前我的理解是先左边界-370px,然后是想position问题,所以始终想不通。其实我们可以反过一想先定位后边界,这样就很容易理解了。position:它是对浏览器定位的,left:50%;正好在中间的位置上,也就是这个DIV块左边界上处于游览器的中间位置,在加入样式margin-left:-370px,这个370是算出来的,它恰好是div740的一半,我们让DIV往回走370,这样DIV的中线与浏览器的中线重合所以看到的DIV总是在中间的!这个方法也有一个缺点就是如是你
大家感兴趣的内容
12345678910
最近更新的内容解读 CSS 布局之水平垂直居中 - 推酷
解读 CSS 布局之水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法。由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章:
先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的:
如图所示,CSS布局是可以分为几大块的:
盒子内部的布局
文本的布局
盒模型本身的布局
盒子之间的布局visual formatting
脱离正常流normal flow的盒子的布局
absolute布局上下文下的布局
float布局上下文下的布局
正常流normal flow下的盒子的布局
BFC布局上下文下的布局
IFC布局上下文下的布局
FFC布局上下文下的布局
table布局上下文下的布局
css grid布局上下文下的布局
所有的CSS布局其实都是围绕着这些布局模块来的,水平垂直居中也一样。
一. 文本的水平垂直居中
line-height + text-align:center
&div class='wrap'&
水平垂直居中水平垂直居中
html,body{
margin: 0;
line-height: 400
text-align:
height: 400
font-size: 36
background-color: #
这种方法只适合单行文字的水平垂直居中
二. 利用盒模型的水平垂直居中
我们一般讲的盒模型都是说的块级盒的盒模型,也只有块级盒的盒模型用得多一点,块级盒block-level box又是分别由content-box、padding-box、border-box、margin-box组成的,如下图:
也就说我任一个子盒子的水平和垂直方向的边与最外面盒子的间距都是可以控制的,因此也就有如下居中方法:
padding填充
&div class=&wrap&&
&div class=&content&&&/div&
@wrapWidth : 400
margin-left:
margin-right:
margin-top: 20
width: @wrapW
height: @wrapW
background-color: #
@contentWidth : 100
width: @contentW
height: @contentW
padding: (@wrapWidth - @contentWidth) / 2;
background-color: #333;
background-clip:content-
也可以用css3的calc()动态计算:
&div class=&wrap&&
&div class=&content&&&/div&
margin-top: 20
margin-left:
margin-right:
width: 400
height: 400
background-color: #
padding: -webkit-calc(~&(100% - 100px) / 2&);
padding: calc(~&(100% - 100px) / 2&);
width: 100
height: 100
background-color: #333;
background-clip: content-
注意这里我在calc中使用了一个~&&的写法,这是less中的一个语法,告诉less这里不被less所编译,要是被less变异了的话,css的calc函数的参数就不是100% - 100px,而是0%了。
margin填充
&div class=&wrap&&
&div class=&ele&&&/div&
@wrapHeight : 400
@contenHeight : 100
width: 100%;
height: @wrapH
background-color: #
margin-left:
margin-right:
margin-top: (@wrapHeight - @contenHeight) / 2;
width: 100
height: @contenH
background-color: #333;
使用margin填充我们需要知道元素的宽度,这点不太灵活,不过CSS3搞出了一个加fit-content的属性值,可以动态计算元素的宽度,
使用盒模型进行布局不会产生reflow,兼容也好,使用盒模型布局是一种布局思想,其实仅仅靠它就能实现很多visual formatting才能实现的布局,这是另一个话题,这里不展开。
三. absolute布局上下文下的水平垂直居中
50% + -50%
原理很简单,就是利用left:50%将盒子的左边先置于父容器的中点,然后再将盒子往左偏移盒子自身宽度的50%,这里有三种具体实现:
&div class=&wrap&&
&div class=&ele margin&&水平垂直居中水平垂直&br&居中水平垂直居中水平&br&垂直居中水平垂直居&br&中水平垂直居中&/div&
&div class=&wrap&&
&div class=&ele translate&&水平垂直居中水平垂直&br&居中水平垂直居中水平&br&垂直居中水平垂直居&br&中水平垂直居中&/div&
&div class=&wrap&&
&div class=&ele relative&&
&div class=&ele-inner&&水平垂直居中水平垂直&br&居中水平垂直居中水平&br&垂直居中水平垂直居&br&中水平垂直居中&/div&
width: 100%;
height: 200
background-color: #
left: 50%;
background-color: #333;
width: 160
height: 100
margin-left: -80
margin-top: -50
&.translate{
-webkit-transform:translate3d(-50%, -50%, 0);
transform:translate3d(-50%, -50%, 0);
.ele-inner{
left: -50%;
top: -50%;
width: 100%;
height: 100%;
background-color: #333;
&.relative{
width: 150
height: 100
background-color:
上面三个方法中,margin方法和relative方法都需要知道元素的宽高才行(relative方法只知道高也行),适用于固定式布局,而transform方法则可以不知道元素宽高
text-align:center + absolute
text-aign:center本来是不能直接作用于absolute元素的,但是没有给其left等值的行级absolute元素是会受文本的影响的,可以参考张老师的
&div class=&wrap&&
&div class=&ele&&&/div&
text-align:
width: 100%;
height: 400
background-color: #
font-size: 0;
margin-left: -(100px / 2);
margin-top: (400px - 100px) / 2;
width: 100
height: 100
display: inline-
background-color: #333;
简单解释下,首先,text-align:center作用的是文本而不是absolute的元素,但是,当absolute元素为inline-block的时候,它会受到文本的影响,然后你可能会问这里没文本啊,我只能告诉你说这下面是有的,是个匿名的文本节点。具体的这里不展开,可以参考
,然后理解这句话:
If the inline box contains no glyphs at all, it is considered to contain a strut (an invisible glyph of zero width) with the A and D of the element's first available font
然后这个匿名文本由于受到text-align:center影响居中了,这个时候absolute盒子的左边跟父容器的中点对齐了,所以就还需要往回拉50%,这里用的是margin-left,你也可以用其它方式拉。然后就是垂直方向的对齐,垂直方向是不能被操作文本的属性影响的,所以我这里用的是margin-top来让它偏移下去。
absolute + margin : auto
&div class=&wrap&&
&div class=&ele&&&/div&
html,body{
width: 100%;
height: 100%;
margin: 0;
width: 100%;
height: 100%;
background-color: #
bottom: 0;
width: 100
height: 100
background-color: #333;
关于这种布局的原理,在标准中能找到如下解释:
中有这样一句话:
The constraint that determines the used values for these elements is: 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
这句话说的是absolute性质的盒子,它的包含块的宽度等于它的盒模型的宽度 + left + right值,包含块的高度同理,盒模型包括margin-box、border-box、padding-box、content-box,而在这个居中方法中,.ele的left + right值是0,width是定值,width所在盒子包括了除了margin-box外的那三个box,margin都是auto值,按照上面那个公式,margin-left + margin-right的值应该等于包含块的宽度 - left的值 - right的值 - width的值,也就是说margin-left + margin-right的值等于除了width所占宽度外的剩下宽度,拥有剩下宽度后,就是平分其宽度,以让左右两边相等,达到居中,标准中给出了答案:
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left')
结合原文中的上下文,这句话主要说的是如果left、right和width都不为auto,同时margin-left和margin-right都是auto,除非特别情况,它们俩就是相等的,而这个例子中不在特殊情况之列,因此两者平分,此时达到了水平居中。而对于,垂直方向的margin的auto值的计算,我没有找到相关规范,还望知道的大神予以指点。
这种方法能简单的做到居中,但是必须有width和height值
适用于图片居中的网易nec的一个方法
&div class=&wrap&&
&img src=&/img/s/1.jpg& alt=&& /&
&img src=&/img/s/1.jpg& alt=&& /&
html,body{
width: 100%;
height: 100%;
margin: 0;
width: 100%;
height: 100%;
&:nth-child(1){
visibility:
&:nth-child(2){
right:50%;
bottom:50%;
这种方法主要是利用了一个图片进行占位,以让父容器获得高宽,从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小,随便放张尺寸不超过父容器的图片上去都能做到居中。另外,兼容性好,如果是不使用nth-child选择器的花,IE6都是能顺利兼容的
四. float布局上下文下的水平垂直居中
float + -50%
&div class=&wrap&&
&div class=&ele&&
&div class=&ele-inner&&居中居中居中居中居中居中&br&居中居中居中居中居中居中居中居中居&br&中居中居中居中居中居中居中居中居中居&br&中居中居中居中居中居中居中&/div&
width: 100%;
height: 400
background-color: #
left: 50%;
.ele-inner{
left: -50%;
-webkit-transform : translate3d(0, -50%, 0);
transform : translate3d(0, -50%, 0);
background-color: #333;
这种方法的原理,首先是利用float属性将需要居中的元素的父元素.ele的宽度收缩,然后left:50%将.ele的左边和水平中线对齐,这个时候还没居中,还需要将其往回拉自身宽度的50%,于是.ele-inner便是真正需要水平居中的元素,我给它一个position:relative,将其往回拉自身宽度50%就行了。对于垂直方向,依然是先将.ele top:50%到垂直方向中点,但是这时给.ele-inner top:50%是不起作用的,因为如果没给父元素明确高度的话,这个50%是计算不出来的,因此,就有了transform : translate3d(0, -50%, 0)。
这种方法的好处是元素可以不定宽,任何时候都可以做到居中
我当时在w3cplus的站上发现这个方法后,当时觉得这个方法很好,兼容性好,又还可以不定宽,但当我用了一段时间后,发现了一个问题:
就是当居中元素的父元素left:50%时,如果元素宽度足够大,会超出外面的容器,而如果外面的容器又正好是overflow:auto的话,那就会在外面产生滚动条,问题DEMO链接
,后来我找到了一个办法:
,基本思想就是利用元素超出父元素的左边不会产生滚动条的特性,有点奇淫技巧,但是能解决问题,有兴趣的可以看看
margin-bottom : -50%
&div class=&wrap&&
&div class=&placeholder&&&/div&
&div class='content'&&/div&
width: 100%;
height: 400
background-color: #
@contentHeight : 100
.placeholder{
width: 100%;
height: 50%;
/*居中元素.content高度一半*/
margin-bottom: -(@contentHeight / 2);
left: 50%;
transform:translate3d(-50%, 0, 0);
/*演示用,实际不需要定宽*/
max-width: 100
height: @contentH
background-color: #333;
这种方法是先让占位元素.placeholder占据50%高度,然后给一个居中元素高度一半的负的margin-bottom,然后下面的元素只要跟着摆放就能垂直居中了。水平方向就是利用translate做偏移,这个没什么好说的,你也可以换成其他办法。
这种方法就是各种固定死,首先最外层的父容器需要一个固定高度,以让.placeholder的height:50%有效,然后,margin-bottom也需要固定死,而且得需要知道居中元素高度。单纯就水平方向来说,这个方法比较适合需要兼容低版本IE的固定式布局的项目,因为兼容性好。
五.BFC布局上下文下的水平垂直居中
BFC的全称是块级排版上下文,这里有篇
对齐进行了简单的介绍,BFC布局上下文下的布局其实就是利用盒模型本身进行的布局,前面在利用盒模型布局的那一节中已经讲过了,这里就不重复了
六.IFC布局上下文下的水平垂直居中
IFC又是个什么概念呢,你可以看看
,也可以简单的理解为 display为inline性质的行级元素的布局。
text-align:center + vertical-align:middle
&div class=&wrap&&
&div class='placeholder'&&!--占位元素,用来作为居中元素的参照物--&&/div&
&div class=&ele&&&/div&
width: 100%;
height: 400
/* min-height: 400 */
text-align:
font-size: 0;
background-color: #
.placeholder,
vertical-align:
display: inline-
.placeholder{
min-height:
width: 100
height: 100
background-color: #333;
行级元素会受到text-align和vertical-align的影响,关于vertical-align,不太好理解,我多贴几篇文章:
,这里首先是用text-center让inline-block水平居中,然后给一个vertical-align:middle,但是仅仅给vertical-align:middle是不够的,因为此时它还没有vertical-align对齐的参照物,所以就给了一个占位的inline-block,它的高度是100%。
这个方法对于居中元素不需要定宽高,而且元素根据vertical-align值的不同不仅仅可以实现居中,还可以将其放在上面下面等。缺点是父元素需定高
text-align:center + line-height
&div class=&wrap&&
&div class=&ele&&居中居中居中居中居中居中&br&居中居中居中居中居中居中居中&br&居中居中居中居中居中居中居中居中&br&居中居中居中居中居中居中居中居中&/div&
text-align:
line-height: 400
width: 100%;
height: 400
background-color: #
font-size: 0;
line-height:
vertical-align:
display: inline-
background-color: #333;
font-size: 18
这个方法,首先是水平方向,text-align:center就行了,至于垂直方向,起作用的就是父容器的一个line-height和居中元素的vertical-align:middle,为什么这两个属性可以让一个inline-block垂直居中呢,这里重点是父容器在其下面产生了一个隐匿的文本节点,这个我在上面 text-align:center + absolute 那个方法的讲解中说到过了,然后这个这个隐匿文本节点会因line-height属性的作用而拥有了一个父容器一样高的行高,此时元素有了一个vertical-align对齐的参照物,再给其vertical-align:middle值就能垂直对齐了。
使用这个方法,居中元素无需定宽高,但缺点是得给父容器一个固定的行高才行。
text-align:center + font-size
&div class=&wrap&&
&div class=&ele&&&/div&
text-align:
font-size: 400px * 0.873;/*约为高度的0.873*/
margin-left:
margin-right:
width: 400
height: 400
background-color: #
vertical-align:
width: 100
height: 100
display: inline-
background-color: #333;
这个方法来自淘宝,基本原理还是让隐匿文本节点所占据的行高等于父容器的高度,然后给居中元素一个vertical-align:middle对齐的一个参照。只是这里把定义line-height值换成了定义font-size值,让font-siz足够大从而让其行高等于父容器高度。为了证明这个font-size的作用,我把居中元素换成文本
&div class=&wrap&&
text-align:
font-size: 400px * 0.873;/*约为高度的0.873*/
margin-left:
margin-right:
width: 400
height: 400
background-color: #
可以看到字母a垂直居中了,这个字母a就对应那个隐匿文本节点
七.FFC布局上下文下的水平垂直居中
&div class=&wrap&&
&div class=&ele&&
居中居中居中居中居中居中居中&br&
居中居中居中居中居中居中居中&br&
居中居中居中居中居中居中居中&br&
居中居中居中居中居中居中居中&br&
居中居中居中居中居中居中居中
html,body{
width: 100%;
height: 100%;
align-items:
justify-content:
width: 100%;
height: 100%;
background-color: #
background-color: #333;
flexbox是个很强大的布局模块,也就三个属性就搞定居中了,而且不论父容器还是居中元素都可以不定宽高。参考链接:
八.table布局上下文下的水平垂直居中
&div class='wrap'&
&div class='ele'&
&div class=&ele-inner&&居中居中居中居中居中居中居中居中&br&居中居中居中居中居中居中居中居中&br&居中居中居中居中居中居中居中居中居中居中&/div&
width: 100%;
height: 300
background-color: #
text-align:
vertical-align:
display:table-
.ele-inner{
display: inline-
background-color: #333;
原理就是把div模拟成表格(换成真正的表格标签也是可以的),然后给那几个属性就成了,这个没什么好讲的,不懂的去翻翻手册就明白了,然后@于江水写的一篇
九.CSS grid布局上下文下的水平垂直居中
CSS3 grid layout是IE搞出来的一个布局模块,目前貌似还只有IE0和IE11支持,我没有研究过其居中的方法,有兴趣的可以看看
十.其它未知归属的水平垂直居中方法
使用button标签
居中居中居中居中居中居中&br&
居中居中居中居中居中居中&br&
居中居中居中居中居中居中&br&
居中居中居中居中居中居中&br&
width: 100%;
height: 400
background-color: #
border-width:0;
display: inline-
font-size: 18
background-color: #333;
这种方法属于奇淫技巧,利用button标签天生外挂的这一技能对其里面的元素进行居中。
(本文完)
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致为了账号安全,请及时绑定邮箱和手机
如何让浮动后的多个盒子水平居中
第一种,如果有固定的宽高。用一个和所有浮动盒子等宽的大盒子包裹起来,然后设置大盒子的margin:0就可以水平居中。需要注意大盒子的宽除了要包括里面盒子的总宽外还要包括每个盒子的外边距,内填充,边框等。还有大盒子里面所有元素浮动之后,大盒子的高度消失的问题。
第二种,使用绝对或相对定位。还是用一个大盒子包裹起来,大盒子的position设置成absolute或者relative,然后大盒子的left为50%,margin-left设置为负的大盒子宽度的一半,这也需要知道大盒子的宽度。
第三种,不需要设置任何宽度。所有盒子不使用浮动,而使用display:inline-来使盒子在一行显示,然后设置父元素的text-align:来使子元素居中。父元素需要占整个一行,并且每个盒子的html标签之间不能有空格或者换行,也就是必须紧挨着。这样的好处是,不用设置任何宽度,每个盒子可以自适应内容的宽度。
你还没有登录,请先登录或注册慕课网帐号
这位同学很懒,木有签名的说~!我哪里懒了。。。
width: 100%;
}首先呢,楼主需要一个大盒子把所有浮动的盒子包起来,并在大盒子的最后面放一个class="clear"的div。然后呢,给大盒子设定合适的width,并且设置为margin:0然后就很开森的居中咯
你还没有登录,请先登录或注册慕课网帐号
我是要成为前端王的男人!(目前是页面重构)
用 flex 布局
你还没有登录,请先登录或注册慕课网帐号
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&试验浮动元素水平居中&/title&
&style type="text/css"&
width: 900
height: 500
margin-left: 50%;
height: 30
border-left: 1
background-color: #
width: 100
height: 100
margin-left: 50%;
padding: 30
&div&&/div&
&div class="float1 f"&&/div&
&div&&/div&
&div class="float2 f"&测试内容&/div&
&div class="float3 f"&我是内容撑开部分&/div&
&script src="/jquery/1.9.1/jquery.min.js"&&/script&
&script type="text/javascript"&
$(function() {
var sumWidth = $(".float2").outerWidth() + $(".float3").outerWidth();
var left = -(sumWidth / 2);
$(".float2").css({
"position": "relative",
"margin-left": "50%",
"left": left + "px"
$(".float3").css({
"position": "relative",
"left": left + "px"
你还没有登录,请先登录或注册慕课网帐号
52733人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2

我要回帖

更多关于 css div 水平居中 的文章

 

随机推荐