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. 【转载】OLE DB, ADO, ODBC关系与区别

    原文:OLE DB, ADO, ODBC关系与区别 OLE DB, ADO, ODBC 一. ODBC(Open Database Connectivity,开放数据库互连)是微软公司开放服务结构(W ...

  2. RTP学习笔记

    一.定义 实时传输协议(Real- time Transport Protocol,RTP)是在Internet上处理多媒体数据流的一种网络协议,利用它能够在一对一(unicast,单播)或者一对多  ...

  3. 卡尔曼滤波— Constant Velocity Model

    假设你开车进入隧道,GPS信号丢失,现在我们要确定汽车在隧道内的位置.汽车的绝对速度可以通过车轮转速计算得到,汽车朝向可以通过yaw rate sensor(A yaw-rate sensor is ...

  4. linux sudo apt-get用法详解

    APT的使用(Ubuntu Linux软件包管理工具一)apt-cache search # ------(package 搜索包)apt-cache show #------(package 获取包 ...

  5. [c/c++]linux下使用c/c++操作mysql

    首先需要安装相应的库文件,直接apt-get就可以. sudo apt-get install libmysqlclient-dev 编译的时候,需要额外链接到这个库.如果是apt-get安装的话,那 ...

  6. linux留下后门的技巧

    在团队内部的wiki上已经写出 http://drops.wooyun.org/tips/1951 http://www.freebuf.com/sectool/10474.html 还有一种方法是写 ...

  7. CALayer总结（三）

    CPU VS GPU 动画和屏幕上组合的图层实际上被一个单独的进程管理,而不是你的应用程序.这个进程就是所谓的渲染服务.在iOS5和之前的版本是SpringBoard进程(同时管理着iOS的主屏).在 ...

  8. 3----lua的数据转换及运算符

    lua的基本数据类型转换 转换成字符串 tostring( ... ) 可以将布尔类型和数字类型的值转换为字符串类型的值 local num=1; print(type(num)) newNum = ...

  9. 不含类解决最后一个li边距问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 09 高效的PL/SQL程序设计

    程序包 Package 断开了依赖链 实验依赖关系: <1> 首先不使用包 -- 创建表 CREATE table t (x int); -- 创建视图 create view v as ...