设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 4882|回复: 6

[求助] 怎么使整个网页居中

[复制链接]
发表于 2012-5-30 16:41:46 | 显示全部楼层 |阅读模式
本帖最后由 mytiantang 于 2012-5-30 16:45 编辑

现在电脑的分辨率都比较大了 怎么样让先前满足102×768分辨率下的网页在大的分辨率下仍然居中显示
我试过的方法(1)选择body标签 然后设置居中 这个方法不可以 倒是让所有的文字都居中了,页面仍然没有居中(2)设置左右边距 margin-left:auto; margin-right:auto; 这个也不行 ,我看好多都是说这样设置就可以了 但是不知道为什么我做的就是不居中
谁知道是怎么回事 帮忙看看 谢过!我的CSS代码如下:
/*  Typo
----------------------------------------------- */
* { margin:0px; padding:0px; }
a:link, a:visited { text-decoration: none; color:#000; }
a:active { text-decoration: none; }
a:hover { text-decoration:none; color:#2C87D0; }


h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; }

p { font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

/*  Layout
----------------------------------------------- */

body {margin:0 auto; width:964px; }


#container { margin:0 auto; width:964px; background:#FFF8DC;  }






#telBox {height:68px; text-align:right; font-family:"微软雅黑"; font-size:19px; color:#ff6600; line-height:68px; padding-right:10px; }

#navigation {margin:0 auto; width:964px; height:32px; }


#sidebar { float:left; margin-left: 15px; margin-top:10px; width:182px; }

#content { float:left; margin-top:10px; width:70%; margin-left:0px; }

#footBox{ clear:both; margin-top:10px; background:url(footbg.jpg) repeat-x top; height:38px; }

#footer { width:9auto;  margin:0 auto; margin-top:10px; text-align:center; color:#EECBAD; }
#footer a:link,#footer a:visited { color:#000; text-decoration:none; }
#footer a:hover {color:#2C87D0; text-decoration:none;}

#contentfooter .leftrow{ height:38px; line-height:38px;}
#contentfooter .rightrow{ height:38px; line-height:38px;}
/*  Navigation
----------------------------------------------- */




#userbox #jimdobox {float:left; width:170px;height:150px;}

发表于 2012-7-15 01:23:11 | 显示全部楼层
在 body里加入一个 position:relative;  试试
发表于 2012-8-2 11:08:47 | 显示全部楼层
是不你的浏览器版本太低呀
发表于 2013-2-12 18:54:57 | 显示全部楼层
点评:简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦
一.层的横向居中

复制代码代码如下:
<style>
#div1{width:600px;height:600px;}
#div2{width:400px;height:200px;}
</style>
<divid="div1">
<divid="div_2">div2</div>
</div>

要让div2在div1中横向居中,解决办法如下:
1.IE中,设置div1的样式:text-align:center;该方法在IE8以上版本和firefox中仅适用于行内元素居中(display:inline;和display:inline-block;及类似效果的元素以及文本,如inputimg等),子元素中的div、table等具有类似display:block效果元素将继承这个样式使文本居中,但是容器元素本身并不会居中。
2.IE7以上和firefox中,设置div2样式:margin:auto;仅对具有类似display:block效果的元素生效,对display为inline、inline-block的元素不生效,一般用于div、table等位置定位的容器元素,margin样式auto效果是横向居中,并置顶。
3.div2不能是position:absolute;绝对定位将使浏览器无法对元素自动排版,需依赖left、right属性,除非明确设定left:0,right:0;
综合以上:

复制代码代码如下:
#div1{
*text-align:center;/*ie*/
}
#div2{
margin:auto;
display:block;
*display:inline;/*ie*/
*zoom:1;/*ie*/
}

二.层的垂直居中
1.最常见的就是表格元素的vertical-align:middle;和css中的vertical-align:middle;
css中的vertical-align:middle;与表格的vertical-align不太一样,该样式作用于inline-block(或具有类似行内块状效果)的元素与其父元素内的文本或祖先元素内的文本(如果该祖先元素内的inline-block元素没有设置vertical-align样式)在垂直方向的对齐方式。
vertical-align无法影响后代元素的内容的对齐方式。
vertical-align对block元素不起作用,因为折行了在垂直方向没有对齐可言。
vertical-align作用于inline元素(如span)时,将决定该元素自身如何对齐于同一行内的inline-block元素,无法影响同辈元素或文本的对齐方式。
vertical-align取值为text-toptext-bottom时,对齐方式涉及文本的inline-box模型,
inline-box模型的高度由line-height(可以是继承来的)决定,分为content-area、top、bottom几个部分,其中的content-area是由文字大小决定,如果过line-height很大,font-size较小,加上背景颜色,我们就看到的背景色区域就是content-area,
text-top和text-bottom并不是可见的文字的顶端和底端(IE6-8在渲染text-top和text-bottom时,错误地将content-area的顶端和底端作为对齐的基准)。
具体的解释参考这里:
http://www.jb51.net/css/70053.html
一个例子,firefo、chrome与IE有差别:

复制代码代码如下:
<divstyle="line-height:200px;border:1pxsolid#34538b;">
<spanstyle="font-size:60px;border:1pxsolid#a0b3d6;vertical-align:text-top;">大大的文字</span>后面是静止的文字。
</div>


复制代码代码如下:
##==================test==================
document.body.innerHTML='<divid="conatiner"style="border:1pxsolidred;width:500px;height:300px;text-align:left;">aaaaaaaaa<divstyle="border:1pxsolidblue;display:inline-block;vertical-align:bottom;"><divstyle="border:1pxsolidgreen;width:300px;height:200px;text-align:center;display:inline-block;display:inline-block;display:inline-block;display:inline-block;*display:inline;*zoom:1;margin:auto;display:inline-block;">12313123123<inputtype="button"style="margin:auto;display:inline-block;height:40px;"value="click"><spanstyle="background:#aaeeff;height:40px;">helloworld</span></div>8888</div>bbbbbbbbbb</div>';
##====================================

2.如果不想用table元素实现垂直居中,在IE8以上版本和firefox中,display:table-cell;可以让div以表格单元格的方式显示,设置样式为
#div2{display:table-cell;vertical-align:middle;},但IE6中不支持display:table-cell;
3、如果是单行文本,为了兼容IE6,可以使设置行高与div的高度一致#div2{heigh:100px;line-height:100px;}
4、对于多行文本,如果包含文本的div高度不固定,为了兼容IE6可以使设置top和bottom的padding为相同的固定值,div随文本内容增加而自动改变高度#div2{height:auto;padding:10px0px;}
三.绝对居中
1、利用百分比偏移和margin负值,该方法对所有元素生效,该方法兼容所有浏览器

复制代码代码如下:
<style>
.div_1{
position:relative;
border:solid1pxred;
width:200px;
height:200px;
background-color:silver;
}
.content{
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
margin-top:-25px;
margin-left:-25px;
/*或者margin:50%;top:-25px;left:-25px;*/
border:1pxsolidgreen;
}
</style>
<divclass="div_1">
<divclass="content">
Contenthere
</div>
</div>

2、利用绝对定位0偏移和margin:auto;,两侧偏移都被设置为0时,margin:auto将使内容居中,该方法对所有元素生效,该方法不兼容低于IE8的浏览器

复制代码代码如下:
<style>
.div_1{
position:relative;
border:solid1pxred;
width:200px;
height:200px;
background-color:silver;
}
.content{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
height:50px;
width:70%;
border:1pxsolidgreen;
}
</style>
<divclass="div_1">
<divclass="content">
Contenthere
</div>
</div>

3、利用50%偏移和负值偏移,支持所有浏览器

复制代码代码如下:
<style>
.outer{
position:relative;
border:1pxsolidred;
width:400px;
height:300px;
}
.cellOuter{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
border:0pxnone;
background:transparent;
}
.cellInner{
position:absolute;
top:-50%;
left:-50%;
width:100%;
height:100%;
border:1pxsolidgray;
}
</style>
<divclass="outer">
<divclass="cellOuter">
<divclass="cellInner">hellocell</div>
</div>
</div>

不使用table和不计算尺寸而且兼容IE6的垂直居中方法我没发现,有知道的同学望赐教。
四.文本挣开div的问题
默认情况下如果没有设置块状元素的高宽,块级元素宽度取最大值,高度取最小值。
IE6下,div内的内容(文本和元素)可以撑开div的高宽(定义了高宽的值),IE7以上版本和firefox都不存在这个问题
IE7以上版本支持min-heightmax-height,min-widthmax-width,因此在IE7或firefox等较新的浏览器是用min-heightmin-width可以达到IE6下自动撑大元素的效果。

详细出处参考:http://www.csdn123.com/html/2013 ... a1a8619e1d498cd.htm
发表于 2013-8-25 17:33:57 | 显示全部楼层


<div style="margin:auto; width:980px"></div>

关键是margin:auto且必须设置宽度
发表于 2013-9-20 10:08:08 | 显示全部楼层
本帖最后由 冰河遗民 于 2013-9-20 10:35 编辑
155120699 发表于 2013-2-12 18:54
点评:简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦
一.层 ...

可是如果要让<div><img /></div>图片居中呢?因为有些页面图片比较多,要让图片在页面下拉时才读取,在页面加载时用一个32*32的小图片代替,所以前后图片大小是不一样的;table-cell又不兼容ie7-,使用table显示代码看起来稍微多了点,网上有方法是在<img />前添加<span>设置为span{display:inline-block;vertical-align:middle;width:1px;padding:-1px;float:left;}可素还是挺繁杂的,有木有别的方法?
发表于 2013-9-20 10:34:19 | 显示全部楼层
额  现在刚刚看完  ,好吧,我什么都没说,!。
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2018-6-20 20:42 , Processed in 0.088326 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表