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

/***文字容器固定高度的文字的竖直居中显示*/Object.prototype.middle=function(){this.innerHTML="<span>"+th... /**
* 文字容器固定高度的文字的竖直居中显示
*/
Object.prototype.middle = function(){
this.innerHTML = "<span>"+this.innerHTML+"</span>";
var span = this.getElementsByTagName("span")[0];
var spanHeight = span.offsetHeight;
var liHeight = this.offsetHeight-parseInt(getStyle(this,"borderBottomWidth"))-parseInt(getStyle(this,"borderTopWidth"));;
this.style.paddingTop =(liHeight-spanHeight)/2+"px";
this.style.height = liHeight-(liHeight-spanHeight)/2+"px";
}
var getStyle = function(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return document.defaultView.getComputedStyle(obj,null)[attr];
}
}
你需要文字居中的容器比如
<div id="div" style="heigth:500px;border:solid 10px red">
这里是你要居中的文字,这里是你要居中的文字,这里是你要居中的文字,这里是你要居中的文字
</div>
使用的时候这样就可以:
var div = document.getElementById("div");
div.middle();//文字就会自动垂直居中
经验分享!
展开
 我来答
hugr05
2018-04-12 · TA获得超过1.2万个赞
知道小有建树答主
回答量:35
采纳率:0%
帮助的人:5222
展开全部

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,提供了数据验证的基本功能。

albalulu
2014-01-24
知道答主
回答量:24
采纳率:0%
帮助的人:7.8万
展开全部
文字仅一行:line-height
文字不定行:display:table-cell; veritical-align:middle;
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
xingheruhai
2015-07-16
知道答主
回答量:4
采纳率:0%
帮助的人:4万
展开全部
在表格td中,有两个属性控制居中显示
align——表示左右居中——left,center,right
valign——控制上下居中——left,center,right
这两个属性综合使用,就可以让单元格的内容上下左右都居中显示。
但是有的时候吧,会失效,那么在td中设置text-align为center也可。

td
{
text-align:center;
}

答案来源:http://blog.csdn.net/woshixuye/article/details/7276034
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2014-01-24
展开全部
text-algin:center
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式