Dzwebs.Net

撰写电脑技术杂文十余年

让DIV对象本身相对于页面垂直居中

Admin | 2014-7-6 10:16:04 | 被阅次数 | 4708

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  要想让对象在网页中居中对齐,如果是水平居中,那倒非常简单,倘若要垂直居中,那么就得花一番功夫了。

  下面给大家介绍,如何让DIV对象,相对于这个页面的高度和宽度,水平和垂直居中。

  第一步:在head区域之内添加CSS代码

  <style type="text/css">
  #MyDiv {
  height: 324px;
  width: 477px;
  margin-top: -162px;
  margin-left: -239px;
  position: absolute;
  left: 50%;
  top: 50%;
  }
  </style>

  上面的代码诠释:height: 324px;width: 477px;这两个参数,指的是DIV对象在页面中的高度和宽度,也可以说,DIV对象里面的内容的高度和宽度。一定要自行根据需要修改。

  MyDiv是DIV对象的ID号。

  其次margin-top: -162px;margin-left: -239px;这两个参数,指的是DIV上述高度和宽度的一半,记好了。只要你知道上面的DIV高度和宽度,分别除以2就得到这两个参数的值了。

  上述的两个参数,一定要根据需要修改正确,否则就不能准确的水平和垂直居中了。其它参数则不需要修改。

  第二步:在BODY区域之内添加DIV对象

  <div id="MyDiv" style="height:324px; width:477px;">
  这里就是内容了,可以是文字也可以是图片等各种对象。
    </div>

  注意哦,上面的 id="MyDiv"是指DIV对象的ID号,请自行修改,如果这里你修改了ID号,那么,在第一步的CSS代码中,也要修改其名称,改成一样的名称。


该杂文来自: 网页制作杂文

上一篇:js打印网页中特定的内容而不是全部

下一篇:CSS中ZOOM属性的作用及使用

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计