微凝空间™

提起网页div居中,搞前端的你一定会想到margin:auto或者text-align:center;但是此举只能解决内容的水平居中,如若想要垂直居中,那就没有这么简单了!

曾几何时你也使用到margin-top=(父元素-本级元素)/2的法子,但是这种方法不是最好的,因为就css这块来说,不通用!如若元素有改变,那么此举就显得纠结了!你是一个个的定义css呢?还是一个个的定义css呢?

当然,有前端开发者也提到使用table,外加vertical-align:middle;或者直接给上级元素定义display:table-cell在 用vertical-align;但是这种方法,ie无效!所以,是不可取的!而且table的冗余代码太多,影响网页加载速度!

当然,padding也是可以的,几乎和margin是差不多的,就像前面说的,这也是不可取的!

如果使用line-height呢?杯具的是这个只能对一行进行垂直居中定位!而且当元素为可变高度的元素时,这个就无能为力了!

所以,最好的办法还是js!

使用js的步骤原理非常简单!

1,获取本元素的宽度和高度;

2,获取父级元素的高度和宽度;

3,给本级元素定padding值;

效果先上到这里:

代码就很简单了:

HTML部分:

<!–Related products–>
    <div class="prelated">
        <h2>Related Products</h2>
        <ul>
            <li class="prunit">
                <ul>
                    <li class="prcas"><a href="">148546-82-1(AB1005377)</a></li>
                    <li class="primg"><a href=""><img src="/image/148546-82-1.gif" alt="CAS Number:148546-82-1 | 4-Methylpyridine-3-boronic acid" /></a></li>
                    <li class="prname"><a href="">4-Methylpyridine-3-boronic acid</a></li>
                </ul>
            </li>
           
            <li class="prunit">
                <ul>
                    <li class="prcas"><a href="">148546-82-1(AB1005377)</a></li>
                    <li class="primg"><a href=""><img src="/image/148546-82-1.gif" alt="CAS Number:148546-82-1 | 4-Methylpyridine-3-boronic acid" /></a></li>
                    <li class="prname"><a href="">4-Methylpyridine-3-boronic acid</a></li>
                </ul>
            </li>
           
            <li class="prunit">
                <ul>
                    <li class="prcas"><a href="">148546-82-1(AB1005377)</a></li>
                    <li class="primg"><a href=""><img src="/image/148546-82-1.gif" alt="CAS Number:148546-82-1 | 4-Methylpyridine-3-boronic acid" /></a></li>
                    <li class="prname"><a href="">4-Methylpyridine-3-boronic acid</a></li>
                </ul>
            </li>
           
            <li class="prunit prlast">
                <ul>
                    <li class="prcas"><a href="">148546-82-1(AB1005377)</a></li>
                    <li class="primg"><a href=""><img src="/image/148546-82-1.gif" alt="CAS Number:148546-82-1 | 4-Methylpyridine-3-boronic acid" /></a></li>
                    <li class="prname"><a href="">4-Methylpyridine-3-boronic acid</a></li>
                </ul>
            </li>
           
        </ul>
    </div>

CSS部分:

.maincontent .prelated h2, .maincontent .referon h2{
    margin:0 auto;
    height:32px;
    padding-left:10px;
    font-size:16px;
    line-height:30px;
    background-image:url(/image/title_bg.gif);
    font-family:Arial,Tahoma,Helvetica,sans-serif;
    color:#085d00;
    border-bottom:1px #969696 solid;
}

.maincontent .prelated .prunit{
    width:229px;
    border-right:1px #696969 solid;
    float:left;
    padding:10px;
}

.maincontent .prelated .prlast{
    border:none;
}

.maincontent .prelated{
}

.maincontent .prelated a{
    color:#085d00;
    text-decoration:none;
}

.maincontent .prelated a img{
    border:0px;
}

.maincontent .prelated .prunit .prcas{
    font-size:14px;
    font-weight:900;
    color:#085d00;
}

 

.maincontent .prelated .prunit .prname{
    font-size:12px;
    color:#085d00;
}

JS部分:

$(window).load(function(){
        $(".snmain .prelated .prunit .primg img, .maincontent .prelated a img").each(function(){
            $(this).css({"padding-left":(218-$(this).width())/2,"padding-top":(120-$(this).height())/2});
        });

});

注释:css代码不完整,请根据实际情况修改…