js如何让文字居中显示?

JavaScript023

js如何让文字居中显示?,第1张

1、打开编辑器,新建test.html,用于学习今天的内容。

2、接下来需要在head标签下方引入jquery.min.js插件,如下图所示。

3、在页面的body标签里,新建一个div,名称为test。

4、在body标签下方写上<script></script>,用来存放js代码。通过class定位到div,通过css()方法让文字居中。

5、在浏览器中打开test.html,可以在文字在页面中间显示。

普通居中方法:margin:0 auto;就可以实现。应该是样页面的一个DOM居中吧!就用相对定位就可以了。

下面是个小例子:

<body>

<div id="div" style="width:100px height:100px background:#ccc display:none"></div>

    <input type="button" value="click me" id="btn" />

</body>

<script>

var oBtn = document.getElementById('btn')

var oDiv = document.getElementById('div')

oBtn.onclick = function(){

oDiv.style.cssText = 'width:100px height:100px background:#ccc top:50% left:50% position:absolute margin-left:-50px margin-top:-50px display:block'

}

</script>

cssText 需要将原样式清空后再补填样式。

主要是用样式的定位来做。你可以通过页面的宽度和高度去计算。