文档章节

DIV水平和垂直方向都居中(转)

壹峰
 壹峰
发布于 2017/02/04 23:17
字数 286
阅读 0
收藏 0
来源 : http://www.iteye.com/topic/609383
还有一贴 :http://justcoding.iteye.com/blog/584186
昨天考完试,今天太无聊了,于是看了一下JavaScript,然后写了个让DIV水平和垂直方向都居中的JS。
Chrome 4.0.x、Firefox 3.6、IE 8 下正常。




Html代码  收藏代码
<!-- #main {  
            font-size:30px;  
            width:120px;  
            height:100px;  
            background:red;  
        } -->  
      
        <script src="test.js"></script>  
      
        <div id="main">测试文本</div></pre>







Js代码  收藏代码
//设置div页面居中,参数为div的id  
    function autoMargin(id) {  
        var marginWid;//保存margin结果  
        var marginHei;  
        var divWid;//居中的DIV的大小  
        var divHei;  
        var mainEle = document.getElementById(id);//要计算的div的对象  
      
        //Trident内核  
        if (new RegExp("trident", "i").test(navigator.userAgent)) {  
      
            //获取可见域大小  
            marginWid = document.documentElement.clientWidth;  
            marginHei = document.documentElement.clientHeight;  
            //document.write("trident" + width + "*" + height);  
      
            //获取指定元素的宽和高  
            divWid = mainEle.currentStyle.width.replace(/px/, "");  
            divHei = mainEle.currentStyle.height.replace(/px/, "");  
            //alert(divWid + "\n" + divHei);  
      
        //Webkit和Gecko内核  
        } else if (new RegExp("webkit", "i").test(navigator.userAgent)  
                || new RegExp("gecko", "i").test(navigator.userAgent)) {  
      
            //获取可见域大小  
            marginWid = window.innerWidth;  
            marginHei = window.innerHeight;  
            //document.write("webkit" + width + "*" + height);  
      
            //获取指定元素的宽和高  
            var style = window.getComputedStyle(mainEle, null);  
            divWid = style.getPropertyValue("width").replace(/px/, "");  
            divHei = style.getPropertyValue("height").replace(/px/, "");  
            //alert(divWid + "\n" + divHei);  
        }  
      
        //计算margin大小  
        marginWid = marginWid / 2 - divWid / 2;  
        marginHei = marginHei /2 - divHei / 2;  
      
        mainEle.style.marginTop = marginHei + "px";  
        mainEle.style.marginLeft = marginWid + "px";  
    }

本文转载自:http://huqiji.iteye.com/blog/1039748

壹峰
粉丝 9
博文 595
码字总数 9582
作品 0
广州
其他
私信 提问
如何让DIV水平和垂直居中

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用...

ForingY
2016/06/26
42
0
元素水平居中和垂直居中的几种简单方法

一、如何使元素在水平方向上居中 1. 使用text-align:center。 在父级元素的CSS样式设置text-align:center。把内部嵌套一个div把它当作文本来对待,不过这个方法有时候是不管用的。 2.在需要居...

小陈同学
2014/05/07
139
3
利用vertical-align:middle垂直居中

本文转载于:猿2048网站利用vertical-align:middle垂直居中 以前总是以为vertical-align与text-align是同样的道理,一个是垂直居中,一个是水平居中,结果在这里一点效果也没有。事实上verti...

前端老手
08/31
12
0
CSS实现垂直居中的常用方法

作者:渔歌 网址:http://www.cnblogs.com/yugege/p/5246652.html 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素...

数通畅联
2016/04/15
79
0
DIV和Table的水平、垂直居中

一般图片的居中问题容易解决,我的解决方法是通过样式设置: background-image:url(path) //链接图片的路径 background-repeat:repeat; //设置图片是否是否水平、垂直延展。可用的参数有:r...

freedonn
2014/11/10
89
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx+tomcat配置https

1、nginx配置https和【proxy_set_header X-Forwarded-Proto $scheme;】 2、java代码: String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServe......

perofu
9分钟前
2
0
必看的Linux系统新手进阶老手心得

不知道从什么时候起,linux这个话题变得越来越普及,成为大家经常讨论的话题。无论在网络上还是实际生活中,竟然很多人都在纠结学习linux的问题。网络上给的答案千千万万,而却还有很多人踌躇...

Linux就该这么学
12分钟前
2
0
Spring Boot 配置元数据指南

1. 概览 在编写 Spring Boot 应用程序时,将配置属性映射到 Java bean 上是非常有用的。但是,记录这些属性的最好方法是什么呢? 在本教程中,我们将探讨 Spring Boot Configuration Proces...

liululee
15分钟前
2
0
foreach查找子类

$list = $menu_model -> menu_list();$parent_list = [];foreach ($list as $v){ if ($v['pid'] == 0) { $parent = $v; foreach ($list as $v1) ......

小小小壮
27分钟前
2
0
基于 HTML5 Canvas 实现的 TP-LINK 电信拓扑设备面板

前言 今天我们以真实的 TP-LINK 设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink_20170511/index.h...

htdaydayup
33分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部