强迫整齐症的难题-----上下居中

原创
2014/04/09 15:17
阅读数 158

这个问题对于我来说,已经X度,谷X了不知道多少次了,单行文字用line-height百试百灵,遇到块状的比如说input前面的信息(姓名,密码啥的)用vertical-align也是可以解决的.

可是居中并没有那么简单,网上也还有其他的很多方法,比如说table等..不过大多都是需要高度才能设置准确,在不同的情况下,不可能给每个东西都加上高度,这样css也太可怜了,为了我美好的明天,还是写个js函数来自动设置它的高度吧.

//上下居中
function elemCenter(target) {
    "use strict";
    var elem,
        parent;
    if (typeof target === "string") {
        elem = document.getElementById(target);
    } else {
        elem = target;
    }
    parent = elem.parentNode;
    if (elem.style.height && parent.style.height) {
        elem.style.paddingTop = parseInt(parent.style.height, 0) / 2 - parseInt(elem.style.height, 0) / 2 + "px";
    } else {
        elem.style.paddingTop = parseInt(getStyle(parent, "height"), 0) / 2 - parseInt(getStyle(elem, "height"), 0) / 2 + "px";
    }
}

其实思路挺简单的

用容器的  高度 / 2 -  目标的 高度 / 2 = 目标要在容器中上下居中需要距离 容器顶部 多少距离,之后赋值给paddingTop就可以了,关于这函数里面的getStyle是一个获取外部css样式的小函数,挺好用的,也给大家贴出来吧

//获取外部css样式
function getStyle(obj, attr) {
    "use strict";
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return document.defaultView.getComputedStyle(obj, null)[attr];
    }
}







展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部