电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

CSS文字垂直居中问题的解决VIP免费

CSS文字垂直居中问题的解决_第1页
1/4
CSS文字垂直居中问题的解决_第2页
2/4
CSS文字垂直居中问题的解决_第3页
3/4
CSS文字垂直居中问题的解决CSS中怎样设置才能使对象中的文字垂直居中于对象,这个问题也是捆扰很多朋友的难题。现在网上的很多代码都做不到浏览器兼容。我把网上有关的方法整理了一下,做了些改动,完全可以兼容各主流浏览器。下面具体说一下在不同情况下垂直居中的方法。一、一行文字垂直居中看一下下面的代码:垂直居中functionsel(id){switch(id){case"1":document.getElementById("sub").style.lineHeight="normal";break;case"2":document.getElementById("sub").style.lineHeight="20px";break;case"3":document.getElementById("sub").style.lineHeight="28px";break;}}#all{width:240px;padding:10px;font-size:12px;color:#FFF;background-color:#CCC;}#sub{width:230px;padding:05px;height:20px;overflow:hidden;background-color:#F90;}#sel{margin-top:5px;}select{width:260px;}一行文字垂直居中,此对象高度为20px

默认值,设置行高为:normal设置行高和对象高度相同:20px设置行高比对象的高度大:28px

方法:line-height:20px。设置相同的行高和对象高度。说明:这种设置简单又兼容各种浏览器,支持内联对象。但如果是固定高度的对象,只能显示一行。当有两行文字时,如果不设置“overflow:hidden”会把对象撑开。二、多行文字,且高度自适应请看下面的代码:垂直居中functionsel(id){switch(id){case"1":document.getElementById("sub").innerHTML="三行文字垂直居中,设置相同的内上边距padding-top和内下边距padding-bottom就可以。";break;case"2":document.getElementById("sub").innerHTML="两行文字垂直居中,设置相同的内上下边距padding-top和padding-bottom就可以。";break;case"3":document.getElementById("sub").innerHTML="一行文字垂直居中,内上下边距相同。";break;}}#all{float:left;width:240px;padding:10px;font-size:12px;color:#FFF;background-color:#CCC;}#sub{float:left;width:230px;padding:10px5px;background-color:#F90;}#sel{clear:both;padding-top:5px;width:260px;}select{width:260px;}三行文字垂直居中,设置相同的内上边距padding-top和内下边距padding-bottom就可以。

三行文字垂直居中两行文字垂直居中一行文字垂直居中

方法:padding-top:10px;padding-bottom:10px。设置相同的上下内边距。说明:兼容各种浏览器,支持内联对象,同时又支持非文本对象,如img。但有一个缺点就是对象的高度不能固定。三、固定高度的多行文字垂直居中这种方法比较复杂。下面还是先看代码:

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

CSS文字垂直居中问题的解决

确认删除?
微信客服
  • 扫码咨询
会员Q群
  • 会员专属群点击这里加入QQ群