div中的文本水平居中，一般都是用text-align:center;就可以解决，那么垂直居中呢，知道vertiacl-align:middle;但有时候却不起作用；整理下div中文本垂直居中对齐的问题（只是自己总结）
1.单行文本垂直居中对齐
① height=line-height即可；

 <!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=utf-8" />

 <title>无标题文档</title>

 </head>

 <style type="text/css">

         *{margin: 0;padding: 0;}

         .text{

                 width: 200px;

                 height: 100px;

                 line-height:100px;

                 border:2px solid #eee;

                 margin: 20px auto;

                 text-align: center;

         }

 </style>

 <body>

 <div class="text">无意苦争春</div>

 </body>

 </html>

②通过padding值来调节，此时padding-top=padding-bottom,且padding-top+padding-bottom+div的height=真正想要的高度；

 <!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=utf-8" />

 <title>无标题文档</title>

 </head>

 <style type="text/css">

         *{margin: 0;padding: 0;}

         .text{

                 width: 200px;

                 height: 100px;

                 padding: 40px 0;

                 border:2px solid #eee;

                 margin: 20px auto;

                 text-align: center;

         }

 </style>

 <body>

 <div class="text">无意苦争春</div>

 </body>

 </html>

2.多行文字
第一种和单行方法②一样；
第二种是将外部该div放到一空div里，该div display：table-cell;vertical:middle;

 <!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=utf-8" />

 <title>无标题文档</title>

 </head>

 <style type="text/css">

         *{margin: 0;padding: 0;}

         .texts{width: 602px;height: 100px;margin: 20px auto;border:1px solid #eee;}

         .text{

                 width: 200px;

                 height: 100px;

                 display: table-cell;

                 vertical-align: middle;

                 text-align: center;

                 border-left: 1px solid #eee;

         }

         .text:first-child{border-left: none;}

 </style>

 <body>

 <div class="texts">

         <div class="text">无意苦争春</div>

         <div class="text">一任群芳妒</div>

         <div class="text">无意苦争春<br />一任群芳妒</div>

 </div>

 </body>

 </html>

对于多行文本可以垂直居中的方法，
单行文本也可以垂直居中。
不过最后一种方法不兼容IE6/7。。。
目前只知道这些，先记录下来。

div中字垂直居中对齐的更多相关文章

  1. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  2. 文本在div中始终垂直居中

    如果是文本字数固定,在div中垂直居中,相信大家都会 这边分享个不固定文本在div中垂直居中的方法 html代码 <div class="box"> <div c ...

  3. p标签在div中水平垂直居中且文本左对齐

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  5. DIV中的垂直居中

    <div style="border:0px #ff0000 solid; width:100px;height:380px; line-height:380px; float:lef ...

  6. img标签在div中水平垂直居中--两种实现方式

    第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;widt ...

  7. 如何让一个div水平和垂直居中对齐

    以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...

  8. 【div+css】两个div，如何让内层的div在外层div中水平垂直居中

    好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...

  9. div中的img垂直居中的方法，最简单！ 偷学来的，，，不要说我抄袭啊(*^__^*)

    让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell;   让标签具有表格的属 ...

随机推荐

  1. 异常详细信息: System.Web.Hosting.HostingEnvironmentException: 访问 IIS 元数据库失败 解决方法

    访问IIS元数据库失败 同理,给操作系统的新建用户赋予IIS操作权限同样可以采用该命令来处理 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错 ...

  2. 关于三星A7屏幕锁已由管理员、加密政策，或证书存储禁用

    解决办法:设定-安全-清除证书-再返回锁定屏幕-把密码锁定-改为滑动.....

  3. 问题处理：找不到Pch预编译文件？

    提醒:Xcode6之后就不再自动创建Pch预编译文件 在Xcode6之前,创建一个新工程xcode会在Supporting files文件夹下面自动创建一个“工程名-Prefix.pch”文件,也是一 ...

  4. javascript权威指南笔记--javascript语言核心（二）

    1.函数作用域:在函数内声明的所有变量在函数体内始终是可见的.这意味着在变量声明之前甚至已经可用. *“声明提前”:javascript函数里声明的所有变量(但不涉及赋值)都被提前至函数的顶部. fu ...

  5. 百度翻译word-wrap，页面错乱原因查找过程(已修复)

    今天群里有人发问, 进入百度翻译http://fanyi.baidu.com/#auto/zh/, 输入word-wrap,发现页面错乱. 寻找错乱原因. 上图 开始查找原因: 1.从请求入手 从ch ...

  6. 杭电1466------简单的dp

    题目: http://acm.hdu.edu.cn/showproblem.php?pid=1466 #include<iostream> #include<cstdio> # ...

  7. 用一张图片制作skybox图片 (如何制作360全景图、立方体)

    我转发的帖子在这里 http://dong2008hong.blog.163.com/blog/static/4696882720140294039205/ 原帖不知道地址 我这里简单整理了下 去掉了 ...

  8. Perl5中19个最重要的文件系统工具

    在写脚本处理文件系统时,经常需要加载很多模块.其中好多有用函数分散在各种不同的模块中.它们有些是Perl的内置函数,有些是在同Perl一起发行的标准模块中,另外一些是通过CPAN安装的. 下面来看15 ...

  9. ubuntu下安装gradle

    1.下载gradle 下载地址:当前版本gradle-2.10-all.zip http://gradle.org/gradle-download/ 2.解压安装gradle unzip gradle ...

  10. jQuery里面的普通绑定事件和on委托事件

    以click事件为例: 普通绑定事件:$('.btn1').click(function(){}绑定 on绑定事件:$(document).on('click','.btn2',function(){ ...