01.Google及搜索引擎研究 02.Linux研究 03.人生道路 04.博客知识 05.大家注意 06.好戏连台 07.富媒体研究 08.我们一家都是野蛮人 09.行走改变生活 10.技术研究 11.搞笑专家 12.样式表研究 13.网罗垃圾 14.老庄道道 15.MAC OSX
四月 2007 一月 2007 十月 2006 九月 2006 七月 2006 五月 2006 三月 2006 二月 2006 一月 2006 十二月 2005 十一月 2005 十月 2005 九月 2005 七月 2005 四月 2005 三月 2005 二月 2005 一月 2005 十二月 2004 十一月 2004 十月 2004 九月 2004 八月 2004 七月 2004 六月 2004 五月 2004 四月 2004 三月 2004 二月 2004 一月 2004 十二月 2003 十一月 2003
汇华网络科技® VIASPEIP® 女儿陈小米 向阳花公社 高原情结 车东's BLOG 行走于一望无际 Rich Boss x5's blog 公共相册 山阳招商投资网® 多乐轮.com®

石头札记

Promote relationship between human and computer
  • 首页
  • 分类导航
  • 时间导航
  • 友情链接
  • Lilina聚合
  • 全部文章

2006年01月08日 星期日

今天google了一下css居中布局的问题,结果差不多都是引用了同一篇文章。在ie中要居中,只要在<body>元素中定义text-align:center;的属性。而在firefox中,需要定义一个wrapper包裹器。然后指定margin-left:auto;margin-right:auto;的属性来使区块在firefox中居中。其实,我自己都是用margin:auto;的缩写margin属性来设定居中。margin缩写属性是上、右、下、左的顺时针顺序来设定四个方位的页面边距的。需要注意的是,如果你据此以为只要设定margin-top:auto;属性后就想使区块居中的话,那你就错了。用这种方式的时候,非得同时设定margin-left:auto;margin-right:auto;属性才能居中。但是,你设定margin:0 auto;这样的方法也是可以居中的。
另外一种居中的方法是在使用绝对定位的前提下,用left:50%+margin-left:-375px;的组合方式来居中。两种居中方式如下。

/* 方法一 */
body {
    background: #00FF7F;
    text-align: center; /* hack for ie center alignlayout */
}
#wrapper{
    background: Aqua;
    width: 750px;
    margin:auto; /* 或者 margin-left:auto;margin-right:auto;*/
}
/* 方法二 */
#wrapper2 {
    position: absolute;
    width:750px;
    left:50%;
    margin-left:-375px;
    background: Orange;
}

我个人一直使用方法一的方式来居中,因为感觉方法二的区块缺乏必要的刚性,代码也不太好理解。如果你缩小方法二的窗体到一定限度,就会看到整个布局会出现流动的情况。当然有人要的就是这种效果。:),另外方法二的一个好处是在其他嵌套区块中不必覆盖body元素的text-align: center;的设定,因为大部分文本还是会以左对齐居多。这样一定程度上可以减少一点冗余。不过我觉得这个好处可以忽略不计。总之,大家根据各自喜好各取所需便是。

另外一个是ie的双倍边距的bug,解决方法就是加上display:inline;的设定即可。其实这个解析错误的bug会影响很多方面。如果你遇到css布局在ie中间距表现异常的时候,就可以试试看加上display:inline;的属性申明了。而且在一定特定的布局问题问题,需要组合使用display:block;和display:inline;才能让布局如你所愿。我在一个unorder list控制的图片菜单中就遇到过类似的问题。

尽快各种不同的浏览器都有css bug,但是css页面布局方式发展到今天,已经比较成熟了,因为bug而让你抓狂不已的发生机率已经不大了。如果有问题,多查查搜索引擎能够解决你大部分的问题。如果,平时闲着的时候,可以作些试验的话,也许更能够在紧急情况下也能够泰然自若。

下次有机会谈谈,图形、图片、flash、javascript和css的组合布局问题。毕竟,客户要的是更“美”的布局。 由 tristones 于 下午09時43分 所发表 | 永久链接 | | 留言 (7)

2006年01月04日 星期三

元旦去丈母娘家休养生息,看到小舅子HD里面有两部国产“大”片,《神话》和《无极》。这几年也没看过什么国产影片,能记起来的好像也就《无间道》一部吧。
小时候很喜欢成龙的片子,几乎每部他的片子都要借来看。可惜,我年纪大了,成龙也老了,片子也越来越烂了。不过,庆幸的是,本来不期望从成龙的片子里能看出什么花来,只是现在连娱乐娱乐这层乐趣也没了。
国内主流导演中,因为《黄土地》的缘故,最喜欢陈凯歌。虽然称不上大师级,不过也算是从矮子里拔出来的高个了。不过,看了1/3部《无极》之后发现,他原来也是个矮子,还不是一般般的矮。估计也是年龄问题闹得,能够3个亿就这么折腾掉,也的确很佩服他了。他号称这部描写“爱情、自由和人性的片子“(这个评述也是看了片子以后去google找来的)的片子能够让人在2小时里面找到久违的幸福感。不过我敢说,我幸福感没找到,半小时里面找到了强烈的呕吐感。
老婆说,片子虽然不好,不过画面不错。我想说,技术这东西不能玩过头,过头了不仅是一个“呆”字了得,且真要人从呕吐物中去寻那色彩斑斓了。还好,我能够及时打住,还是去那《生化危机4》的世界去拯救被困的女孩吧。还好还好,有《第八日》这样的片子能够稍微宽慰一下我不够坚强的心脏。
btw:新生代的国导们,快点跳出来把这些老东西都被拾掇了吧。求你们了!!! 由 tristones 于 下午01時25分 所发表 | 永久链接 | | 留言 (2)
Google Adsense
My Flickr
我所读.所听.所看
最近留言
  • 我文章里面就说了,google就是google,从来不觉得他叫谷歌。不过反过来说,这个本地化项目跟google完全无关也是说不过去的。
    看到那么多人无条件的吹捧google,不管是枪手还是狂热到丧失判断力的人,还是觉得很烦。

    bytristones
  • 石头好像弄错了一件事情,,“谷歌”不等同于“Google”。

    by沈蚊
  • 谢谢你的帮助,APCHE搞定了。

    bykk
聚合/联系
  • Subscribe in Bloglines tristones' blog+my del.icio.us+my Flickr
  • 我的美味书签
Misc
  • Get Firefox!
  • Creative Commons License
  • MoveableType
  • 世界自然基金会(中国站)