DIV教程之使用CSS让元素垂直居中的两种完成办法
在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？破洛洛文章简介：使用CSS让元素垂直居中是个很头疼的成绩，这里就先容两种复杂有用的办法。
使用CSS让元素垂直居中是个很头疼的成绩，这里就先容两种复杂有用的办法
办法一：使用行高（line-height）定位
line-height一般是用于调治一段笔墨的行与行之间的间隔，大概说两行笔墨之间的间隔，假如行高是500px，那末每行中的笔墨间隔本行的顶部就是250px，假如将笔墨的行高设为500px，而且表面的容器的高度也为500px，一样能够完成垂直居中，可是用它来完成垂直居中，也是出缺点的，就是假如内容过量，笔墨就会跑到下一行，那末内容就不成能垂直居中了。
HTML代码：
<h1>Hi,Im<span>VerticallyAligned</span>WithintheH1</h1>
CSS代码：
body{
margin:0;
padding:0;
background:#1d1d1d;
font-size:10px;
font-family:Verdana,Arial,Helvetica,sans-serif;
}
h1{
font:3emGeorgia,"TimesNewRoman",Times,serif;
color:#fff;
height:500px;
line-height:500px;
text-align:center;
border:10pxsolid#999;
}
h1span{
font-weight:bold;
font-size:1.5em;
color:#fff000;
}
p{
font-size:1.3em;
color:#999;
}
strong{
color:#fff;
}
办法二：使用相对定位
先来看看效果，检察演示
这个办法有个弱点我必需指出，就是表面的块状元素，必需指定高度，以是假如你在内里放静态的内容的话，成果会很糟滴~
HTML代码：
<divclass="vert">
<h1>Hi,Im<span>VerticallyAligned</span></h1>
<p>Abigosudomarapaulatimodio,accumsanluptatumnibhnibhreferometuoopesutfatua.Acsietferesimilis<strong>Using</strong>augue<strong>absolute</strong>validus.Regula<strong>positioning</strong>eujusvel,indolesfereiaceoeasimilis.Velitpraemittonullavelluctussecundum.</p>
</div>
CSS代码：
这类用相对定位来完成的垂直居中，取决与元素的宽度和高度，你能够用上面这两个公式来盘算元素的右边距和上边距
元素的宽度/2=负右边距
元素的高度/2=负上边距
在这个例子中，我们就是这么盘算的
.vert{
width:580px;
height:190px;
position:absolute;
top:50%;
left:50%;
margin:-95px00-290px;
}
完全CSS代码
body{
margin:0;
padding:0;
background:#1d1d1d;
font-size:10px;
font-family:Verdana,Arial,Helvetica,sans-serif;
}
h1{
font:4emGeorgia,"TimesNewRoman",Times,serif;
color:#fff;
border-bottom:5pxdotted#999;
margin:0;
padding:0010px;
}
h1span{
font-weight:bold;
display:block;
font-size:1.5em;
color:#fff000;
}
p{
font-size:1.3em;
color:#999;
}
strong{
color:#fff;
}
.vert{
width:580px;
height:190px;
position:absolute;
top:50%;
left:50%;
margin:-95px00-290px;
}
成绩延长
假如元素的表面另有一个父级元素，假如才干让元素垂直居中于父级元素外部？好比上面的代码，多了一个父级元素
<divclass="container">
<divclass="vert">
<h1>Hi,ImNested&<span>VerticallyAligned</span></h1>
<p>Abigosudomarapaulatimodio,accumsanluptatumnibhnibhreferometuoopesutfatua.Acsietferesimilis<strong>Using</strong>augue<strong>absolute</strong>validus.Regula<strong>positioning</strong>eujusvel,indolesfereiaceoeasimilis.Velitpraemittonullavelluctussecundum.</p>
</div>
</div>
这时候候，就必需在界说父级元素的CSS代码中到场position:relative;才干够使外部元素垂直居中于父级外部，代码以下：
.container{
position:relative;
height:500px;
width:800px;
border:10pxsolid#999;
background:#000;
margin:20px;
}
</p>
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。
页:
[1]