DIV教程之网页结构 CSS复杂完成垂直居中

你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
英文原文：
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-CSS/
中文译文：
http://www.12sui.cn/blog/71.html
自己英语还没过四级，以是不克不及说是翻译把，只能说是依照本人的了解往叙说了一遍作者的意义，请列位多多指教。
译文内容：
当你觉察你已经觉得的现实实在并非那样，你会感到很高兴。
旧的办法
常常做的第一件事一般是怎样在CSS中把持元素程度大概垂直偏向上居中，信任这也是良多计划师喜好做的事变。起首，我们接纳相对定位的办法让元素分开顶部和左部50%的间隔，然后我们必要设置一个负的margin来将元素拉回到两头的地位。
如今让我们来看一下这类办法的代码和它所带来的成绩：
CSS代码：
html,body{
height:100%;
margin:0;
padding:0;
}
body{
background:#eae7d7url(images/vert-centre.jpg)repeat-xcentercenter;
text-align:center;
min-width:626px;
min-height:400px;
}
#vert-hoz{
position:absolute;
top:50%;
left:50%;
margin-top:-198px;/*halfelementsheight*/
margin-left:-313px;/*halfelementswidth*/
width:624px;
height:394px;
border:1pxsolidsilver;
background:#666;
overflow:auto;/*allowcontenttoscrollinsideelement*/
text-align:left;
}
h1{color:#fff;margin:0;padding:0}
HTML代码：
<divid="vert-hoz">
<h1>Contentgoeshere</h1>
</div>
你能够在这里看到这段代码的展现。

登录/注册后可看大图

我为它设置了一个背景图片，仅仅是为了让它看起来更恬逸一些，而我们真正必要注重的部分是两头那部分灰色的地区。
如你看到的那样，如今的了局正如我们设想的那样，那部分元素在程度和垂直的偏向上完善的处在了两头的地位。这是依照我们最后提起的那种体例完成的，起首让元素在程度和垂直偏向上分开50%的间隔，然后设置负的margin让它回到两头的地位。
只管外表上看来，如今的办法已无效的到达了我们预期的方针，可是，同时也发生了严峻的负面影响。当一团体将扫瞄器窗口变小，大概利用一个低分辩率的电脑时，那末居中的那部分元素的上部和左部将消散，即便经由过程滚轮的滑动，也没法看到。
当我们将窗口变小，就会看到以下图那样的情形：

登录/注册后可看大图

笔墨的顶部和左部已消散，并且，跟着我们扫瞄器窗口的不休减少，这段笔墨将终极分开我们的视野。为了填补这些负的数值，我们为body设置了min-width和min-height，可是你能够看到，这基本没有起就任何效果，那段笔墨仍然停止在我们视野之外的中央。


改善的办法
针对这些成绩的另外一个相似的版本是让元素仍然坚持垂直偏向上的定位体例，可是程度偏向上设置margin为auto以到达我们的目标。如许子打消了笔墨在程度偏向上的成绩。请看改善的代码。
CSS代码：
html,body{
height:100%;
margin:0;
padding:0;
}
body{
background:#eae7d7url(images/vert-centre.jpg)repeat-xcentercenter;
text-align:center;
min-width:626px;
min-height:400px;
}
#vertical{
position:absolute;
top:50%;
margin-top:-198px;/*halfmainelementsheight*/
left:0;
width:100%;
}
#hoz{
width:624px;
margin-left:auto;
margin-right:auto;
height:394px;
border:1pxsolidsilver;
background:#666;
overflow:auto;/*allowcontenttoscrollinsideelement*/
text-align:left;
}
h1{color:#fff;margin:0;padding:0}
HTML代码：
<divid="vertical">
<divid="hoz">
<h1>Contentgoeshere</h1>
</div>
</div>
你能够在这里看到实践的页面效果。
如许子到达了我们预期的一部分效果，可是在垂直偏向上仍然存在着成绩，你能够鄙人图中看到：

登录/注册后可看大图

终极的版本
如今回到这个成绩，我已经用了一些很庞大的办法往办理，可是如今又一个更复杂、妥当的办法，那就是用浮动往取代相对定位。
我们设定页面上的第一个元素的高度为页面的50%，然后将这个元素向上拉，所拉的间隔即是我们要设假寓中的元素的高度的一半。
这里是我们做出的修改：
CSS代码：
#vertical{
float:left;
height:50%;
margin-top:-198px;/*halfverticalheight*/
width:100%;
}
HTML代码：
<divid="vertical"></div>
<divid="hoz">
<h1>Contentgoeshere</h1>
</div>
你能够在这里看到所展现的效果。

登录/注册后可看大图

这里很主要的一部分就是我们利用了一个宽度为100%的float元素，固然我们要记得为它的下一个元素增加clear:both;,不然，一些扫瞄器将不克不及了解你的意义。假如这里我们不利用float，那末笔墨仍然会消散在我们的视野以外。


这是为何
这里激发了一个关于float的风趣的举动，也恰好往往好好的懂得一下它。那末为何当我们利用一个相对的元素它会消散，而利用浮动却不会发生如许的成果呢？
浮动的实质就是活动，即便你能够经由过程下一个元素的clear从头把持它。位于浮动以后的元素为浮动腾出了空间（扫瞄器一般是为相对元素增添上边距以扫除浮动）。一旦浮动元素不在了，相对元素将回到这个页面的一般地位。因而当我们为浮动元素设置一个负的margin以后，它将克制任何的拦阻往挪动，由于它自己就是基于活动的。当我们渐渐的挪动浮动元素，一向到它消散在外界限里，那末紧跟它的相对元素将回到页面中的一般地位，而不会跟从浮动元素消散。
这是一个现实，当浮动元素不休的往上拉，直到消散，我们的相对元素仍然留在我们的视野当中。这大概有些难了解，可是我们能够经由过程一个复杂的例子往懂得它。
CSS代码：
.float{
width:200px;
height:100px;
background:red;
float:left;
}
.top{
background:green;
height:300px;
width:100%;
}
.follow-on{
clear:both;
background:blue;
height:100px
}
HTML代码:
<divclass="top">Top</div>
<divclass="float">Float</div>
<divclass="follow-on">Followingcontent</div>
这里我们先在上边设定了一个相对元素，然后设置了一个浮动元素，再在浮动元素下设置了一个相对元素。请看下图，大概看这个页面的效果。

登录/注册后可看大图

没有甚么非常，统统都是我们所意料的那样。
如今，假如我们为浮动元素增加一个负的margin：
.float{
width:200px;
height:100px;
background:red;
float:left;
margin-top:-100px
}
那末我们能够看到下图的效果，大概到这里检察效果。

登录/注册后可看大图

仍然统统一般，如我们所意料的，可是假如我们把负的数值调剂为200呢？
.float{
width:200px;
height:100px;
background:red;
float:left;
margin-top:-200px
}
以下图，大概点击这里检察效果。

登录/注册后可看大图

正如你看到的那样，浮动元素分开了它下边的元素，可是浮动下边的元素并没有跟从浮动，而是留在了原本属于它的地位。这很好的注释了我们最后的例子中将浮动元素拉离视野所呈现的情况。
但是，到场我们将白色浮动元素的float属性删除，那末蓝色的元素将跟从它一同被拉进绿色元素的地区。以下图所示，大概在这里检察效果。

登录/注册后可看大图

当一个相对元素的边距margin产生变更时，一切它后边的相对元素的也将产生响应的改动。
我但愿列位会对这个小技能（固然大概你已晓得）感乐趣，也但愿你们能和我一同分享你们常常碰到的成绩。关于这个小技能的完全代码很简单失掉，你能够轻松取得。
假如你想懂得更多的关于居中的办法，能够来看看这里。

层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）