六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

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

Admin | 2014-7-6 10:16:04 | ReadNums | 2158 | 标签 网页制作 | 打印本页
     

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

  下面给大家介绍,如何让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代码中,也要修改其名称,改成一样的名称。


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日