html DIV+CSS让文字垂直居中

CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

一、单行垂直居中

p { height:30px; line-height:30px; width:100px; overflow:hidden; } { height:30px; line-height:30px; width:100px; overflow:hidden; }

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

二、box方法实现水平垂直居中（有一定的兼容性问题）

<div class="center"> <div class="text"> <p>我是多行文字</p> <p>我是多行文字</p> <p>我是多行文字</p> </div> </div>div class="center"> <div class="text"> <p>我是多行文字</p> <p>我是多行文字</p> <p>我是多行文字</p> </div> </div>

.center {width: 300px;height: 200px;padding: 10px;border: 1px solid #ccc;background:#000;color:#fff;margin: 20px auto;display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;display: box;box-orient: horizontal;box-pack: center;box-align: center;
} {width: 300px;height: 200px;padding: 10px;border: 1px solid #ccc;background:#000;color:#fff;margin: 20px auto;display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;display: box;box-orient: horizontal;box-pack: center;box-align: center;
}

注意：display:table-cell;存在火狐浏览器兼容性问题，不建议使用。
可以用position进行处理：
例子：
<style>table,td{border: 1px solid #ddd;}.td-description {height: 37px;width: 750px;/*父元素定位*/position: relative;}.duty-description {overflow: hidden;/*子元素绝对定位*/position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;max-height: 37px;}</style><body><table><tr><td><div class="td-description"><div class="duty-description" >机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育，加强保密检查。机关单位实行保密工作责任制，主要是实行党政领导干部保密工作责任制。 　　1、各级党政领导干部必须自觉接受保密监督，模范遵守保密法律、法规和下列保密守则： 　　⑴不泄露党和国家秘密。 　　⑵不在无保密保障的场所阅办、存放密级文件、资料。 　　⑶不擅自或指使他人复制、摘抄、销毁或私自留存带有密级的文件、资料。确因工作需要复印的，经请示上级有关部门同意后，方可复印，复印件按同等密级文件管理。 　　⑷不在非保密笔记本或未采取保密措施的电子信息设备中记录、传输和储存党和国家秘密事项。 　　⑸不携带密级文件、资料进入公共场所或进行社交活动，特殊情况下由本人或指定专人严格保管。 　　⑹不准用无保密措施的通信设施和普通邮政传送党和国家秘密。 　　</div></div></td></tr><tr><td><div class="td-description"><div class="duty-description" >机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育</div></div></td></tr></table>  table,td{border: 1px solid #ddd;}.td-description {height: 37px;width: 750px;/*父元素定位*/position: relative;}.duty-description {overflow: hidden;/*子元素绝对定位*/position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;max-height: 37px;}</style><body><table><tr><td><div class="td-description"><div class="duty-description" >机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育，加强保密检查。机关单位实行保密工作责任制，主要是实行党政领导干部保密工作责任制。 　　1、各级党政领导干部必须自觉接受保密监督，模范遵守保密法律、法规和下列保密守则： 　　⑴不泄露党和国家秘密。 　　⑵不在无保密保障的场所阅办、存放密级文件、资料。 　　⑶不擅自或指使他人复制、摘抄、销毁或私自留存带有密级的文件、资料。确因工作需要复印的，经请示上级有关部门同意后，方可复印，复印件按同等密级文件管理。 　　⑷不在非保密笔记本或未采取保密措施的电子信息设备中记录、传输和储存党和国家秘密事项。 　　⑸不携带密级文件、资料进入公共场所或进行社交活动，特殊情况下由本人或指定专人严格保管。 　　⑹不准用无保密措施的通信设施和普通邮政传送党和国家秘密。 　　</div></div></td></tr><tr><td><div class="td-description"><div class="duty-description" >机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育</div></div></td></tr></table>

html DIV+CSS让文字垂直居中相关推荐

div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
css图片跟文字居中,css 图片文字垂直居中
先来看张图片相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
div中内容文字垂直居中、文字不换行显示省略号
目录 div中文字垂直居中 2.文字不换行,文本溢出显示省略标志 div中文字垂直居中 1.行高法文字的行高和容器的高度相同, p { height:30px; line-height:30px; ...
div view 中文字垂直居中
1.关于div view中的文字垂直居中,一般通过设置 line-height等于 div的高度来实现,那如果div有边框,那line-height的值为 div的高度 ,要减去边框的宽度*2 2. ...
div中让文字垂直居中
问题引入在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 情景再现为了方便展示,我把style先直接写在了div里. &l ...
html怎么让div中的文字垂直居中,如何让DIV中的文字垂直居中？
在写页面时经常会碰到文字在div中要居中的情况.水平居中很容易,text-align:center就能实现:但垂直居中很少用到,要么就是直接给margin,但现在讲解一下不用margin如何实现垂直居 ...
用div+css设置文字竖排
今天需要实现文字的竖排版,网上搜了搜果然还有,实现起来也非常简单. 只用于ie的方法 1. writing-mode(设置对象书写方向) 语法:writing-mode : lr-tb.tb-rl 参 ...
【css】文字垂直居中
前言 html在线运行https://www.runoob.com/runcode 方法1:容器高度不固定将容器的padding-top和padding-bottom的值设置成相等的值. <! ...
CSS实现文字垂直居中
一.问题描述: 当高度固定或不固定时,单行或多行文本难以实现垂直居中: 二.解决方法: 1.使用line-height属性,将line-height设置与元素高度等高. 局限性:只适用于单行文本,局限 ...

html DIV+CSS让文字垂直居中

html DIV+CSS让文字垂直居中相关推荐

最新文章

热门文章