<meta name="keywords" content="华夏棋牌,文字垂直居中" />
华夏棋牌 > web前端 > css教程 > 注释

css完成文字垂直居中的代码_履历交流-www.jb51.net-css垂直居中www.jb51.net css垂直居中

原创 2016-05-16 12:06:37 0 122
赞助会员专享特权
CSS中怎样设置才干使工具中的文字垂直居中于工具,这个效果也是捆扰许多同伙的难题。现在网上的许多代码都做不到浏览器兼容。我把网上有关的措施整理了一下,做了些修改,完全可以兼容各主流浏览器。
下面详细说一下在不合情形下垂直居中的措施。
一、一行文字垂直居中
看一下下面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>剧本之家-css垂直居中</title>
<script type="text/javascript" language="javascript">
function sel(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;}}
</script>
<style type="text/css">
#all {
width:240px;
padding:10px;
font-size:12px;
color:#FFF;
background-color:#CCC;
}
#sub {
width:230px;
padding:0 5px;
height:20px;
overflow:hidden;
background-color:#F90;
}
#sel {
margin-top:5px;
}
select {
width:260px;
}
</style>
</head>

<body>
<p id="all">
<p id="sub">一行文字垂直居中,此工具高度为20px</p>
</p>
<p id="sel"><select onchange="sel(this.value)"><option value="1">默许值,设置行高为:normal</option><option value="2">设置行高和工具高度类似:20px</option><option value="3">设置行高比工具的高度年夜:28px</option></select></p>
</body>
</html>


措施:line-height:20px。设置类似的行高和工具高度。

诠释:这类设置质朴又兼容种种浏览器,支持内联工具。但假定是结实高度的工具,只能显示一行。当有两行文字时,假定不设置“overflow:hidden”会把工具撑开。
2、多行文字,且高度自顺应
请看下面的代码:

措施:padding-top:10px; padding-bottom:10px。设置类似的曲折内边距。

诠释:兼容种种浏览器,支持内联工具,同时又支持非文本工具,如img。但有一个弱点就是工具的高度不克不及结实。

3、结实高度的多行文字垂直居中

华夏棋牌这类措施较量严重年夜,我也会详细诠释的。下面照样先看代码:

措施:

(1)vertical-align:middle; display:table-cell。这类措施的意思是:将工具强迫转换为Table,vertical-align:middle的作用和表格中的valign="center"类似。

原来是很便利的一个属性,但IE不支持这个属性。为了使各浏览器兼容,我们不克不及不想其他的措施。

(2)在工具内培植一个子工具,并在子工具内再培植一个子工具或段落。网页中:

<p id="a"><p><p>这里具有多行文字,高度是50px这里具有多行文字,高度是50px</p></p></p>

CSS中:

p {margin:0;}:由于在FireFox中默许P是有间距的

#a {height:50px;position:relative;}:设置高度50,假定若是子工具相对它定位,则要设置position:relative

#a p {*position:absolute;*top:50%;}:前面加星号“*”只需IE支持,其他浏览器会忽视此设置。position:absolute设置了此子工具的定位为相对定位,top:50%设置了显示在距顶端50%的职位,即25px(由于下面设置了父工具的高度为50px)。

#a p p {*position:relative;*top:-50%;}:这段代码只能先明确为向上移动剩下高度的50%。由于top设置了负值,相当于向相反的偏向移动。

诠释:支持主流浏览器(在IE6,FireFox2下测试)。

php中文网最新课程二维码
  • 相关标签:文字垂直居中
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 实例详解css3特效之3D翻牌效果
  • 深刻明确form表单中Readonly和Disabled的差异
  • 若何用CSS3和Js制造照顾式导航条
  • 实例详解CSS3制造文字流光突变特效
  • css完成文字垂直居中的代码_履历交流-www.jb51.net-css垂直居中www.jb51.net css垂直居中
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173870)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170040)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137359)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130694)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130036)

    作者信息

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节