仓酷云

标题: DIV教程之CSS罕见的让元素程度居中显现的办法 [打印本页]

作者: 兰色精灵 时间: 2015-1-16 00:01
标题: DIV教程之CSS罕见的让元素程度居中显现的办法
结构清晰，容易被搜索引擎搜索到，天生优化了seo

破洛洛文章简介：用CSS让元素居中显现并非件很复杂的事变―一样的正当CSS居中设置在分歧扫瞄器中的体现举动却半斤八两。让我们先来看一下CSS中罕见的几种让元素程度居中显现的办法。
用CSS让元素居中显现并非件很复杂的事变—一样的正当CSS居中设置在分歧扫瞄器中的体现举动却半斤八两。让我们先来看一下CSS中罕见的几种让元素程度居中显现的办法。
1.利用主动外边距完成居中

CSS中首选的让元素程度居中的办法就是利用margin属性—将元素的margin-left和margin-right属性设置为auto便可。在实践利用中，我们能够为这些必要居中的元素创立一个起容器感化的div。必要出格注重的一点就是，必需为该容器指定宽度：
div#container{
margin-left:auto;
margin-right:auto;
width:168px;
}
在年夜多半支流扫瞄器中，这类办法都十分无效，即便是Windows平台上的IE6，在其尺度兼容形式（compliancemode）下也可以一般显现。但不幸的是，在更低版本的IE中，这类设置却其实不能完成居中效果。以是若想在实践项目中利用这类办法，那末就要确保用户的IE扫瞄器版本不低于6.0。
只管在撑持上不尽善尽美，但年夜多半计划师都倡议尽量地利用这类办法。该办法也被以为是在各类用CSS完成元素程度居中办法中最准确、最公道的一种。
2.利用text-align完成居中

另外一种完成元素居中的办法是利用text-align属性，将该属性值设置为center并使用到body元素上便可。这类做法是彻彻底底的hack，但它却能兼容年夜多半扫瞄器，以是在某些情形下也天然必不成少。
之以是说它是hack，是由于这类办法并未将文本属性使用到文本上，而是使用到了作为容器的元素上。这也给我们带来了分外的事情。在创立好结构必需的div以后，我们要依照以下代码为body使用text-align属性：
body{
text-align:center;
}
以后会呈现甚么成绩吗？body的一切子孙元素城市被居中显现。
因而，我们就必要用再写一条划定规矩，让个中的文本回到默许的居左对齐：
p{
text-align:left;
}
能够设想这条附加的划定规矩将带来一些方便。别的，真正完整遵守尺度的扫瞄器其实不会改动容器的地位，而只会让个中的笔墨居中显现。
3.组合利用主动外边距和文本对齐

由于文本对齐居中体例有着优秀的向下兼容性，且主动外边距体例也被年夜多半今世扫瞄器撑持，以是良多计划师将两者组合起来利用，以期让居中效果失掉最年夜限制的跨扫瞄器撑持：
body{
text-align:center;
}
#container{
margin-left:auto;
margin-right:auto;
border:1pxsolidred;
width:168px;
text-align:left
}
但是这一直是个hack，不管怎样也算不上完善。我们仍是必要为居中容器中的文本编写附加的划定规矩，但最少在各个扫瞄器中看起来都不错。
4.负外边距办理计划

负外边距办理计划远不是仅仅为元素增加负外边距这么复杂。这类办法必要同时利用相对定位和负外边距两种技能。
上面是该计划的详细完成办法。起首，创立一个包括居中元素的容器，然后将其相对定位于绝对页面右边边沿50%的地位。如许，该容器的左外边距将从页面50%宽度的地位入手下手算起。
然后，将容器的左外边距值设置为负的容器宽度的一半。如许便可将该容器流动在页面程度偏向的中点。
#container{
background:#ffcurl(mid.jpg)repeat-ycenter;
position:absolute;
left:50%;
width:760px;
margin-left:-380px;
}
看，没有任何hack！固然这并非首选的办理计划，但也是个不错的办法，且合用性极广—乃至在NetscapeNavigator4.x中都没有任何成绩，很使人受惊，不是吗？以是若想失掉最普遍的扫瞄器撑持，那末这类办法将会是最好的选择。

更好的控制页面布局。不用多说。

作者: 山那边是海 时间: 2015-1-17 23:52
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 分手快乐 时间: 2015-1-26 23:50
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 变相怪杰 时间: 2015-2-5 04:59
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 老尸 时间: 2015-2-11 06:19
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: admin 时间: 2015-3-1 23:49
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 柔情似水 时间: 2015-3-11 02:36
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 乐观 时间: 2015-3-17 19:10
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 兰色精灵 时间: 2015-3-24 23:02
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

欢迎光临仓酷云 (http://ckuyun.com/)