怎么让文字垂直居中,js代码

JavaScript017

怎么让文字垂直居中,js代码,第1张

JS代码让文字垂直居中的方法

水平居中方法: 将浏览器可视区的宽度(clientWidth) -减去 要居中元素本身的宽度(offsetWidth) /除以 2 +'px'

垂直居中方法: 将浏览器可视区的高度(clientHeight) -减去 要居中元素本身的高度(offsetHeight) /除以 2 +'px'

window.onload = function() {

var oMain = document.querySelector('#pop-main')

oMain.style.left = (document.documentElement.clientWidth - oMain.offsetWidth) / 2 +'px'

oMain.style.top = (document.documentElement.clientHeight - oMain.offsetHeight) / 2 +'px'

}

js代码

JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。

当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        #myTest .a1{width: 0overflow: hiddenwhite-space: nowrap}

        #myTest .a1 p{width: 400px}

    </style>

</head>

<body>

<div class="inbox">

    <div id="myTest">

    <div class="a1"><p>这是测试用的!这是测试用的!这是测试用的!</p></div>

    <div class="a1"><p>这是测试用的!这是测试用的!这是测试用的!</p></div>

    <div class="a1"><p>这是测试用的!这是测试用的!这是测试用的!</p></div>

    </div>

</div>

<script src="../static/js/public/jquery.min.js"></script>

<script>

        var myTest=$('#myTest'),pItems=myTest.find('.a1')

        pItems.eq(0).animate({width:"400px"},1000,function(){

            pItems.eq(1).animate({width:"400px"},1000,function(){

                pItems.eq(2).animate({width:"400px"},1000,function(){

                })

            })

        })

</script>

</body>

</html>

这是效果