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. UIView如何管理它的子视图

    UIView提供了很多建立和管理视图的方法. 1.添加视图 insertSubview:atIndex:   //放在子视图数组的具体索引位置 insertSubview:aboveSubview:  ...

  2. netstat 的10个基本用法

    Netstat 简介 Netstat 是一款命令行工具,可用于列出系统上所有的网络套接字连接情况,包括 tcp, udp 以及 unix 套接字,另外它还能列出处于监听状态(即等待接入请求)的套接字. ...

  3. firefox渗透师必备的利器

    工欲善必先利其器,firefox一直是各位渗透师必备的利器,小编这里推荐34款firefox渗透测试辅助插件,其中包含渗透测试.信息收集.代理.加密解密等功能. 1:Firebug Firefox的 ...

  4. hdu 5154 Harry and Magical Computer 拓扑排序

    Harry and Magical Computer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  5. git学习笔记01-git最基本的工作原理分布式

    git学习的网站 http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000  --廖雪峰老师 ...

  6. JavaScript基础知识之——Location 对象详解

    属性 描述 location.hash 设置或取得 URL 中的锚 location.host 设置或取得 URL 中主机(包括端口号) location.hostname 设置或取得 URL 中的主 ...

  7. 图文解说 Dijkstra.

    Dijkstra 太多文章了,有些简练,有些一笔带过.自己还是花了些时间才明白,刚脆自己写个图文说明的,希望能让还没明白的,尽快清楚. 问题:求某点到图中其他所有点的最短路径(权值和最小) Dijks ...

  8. c How to Make an Ascii Picture.

    import java.io.*; public class trans{ public static void main(String[] args){ try{ File inFile = new ...

  9. [转载] C++ 多线程编程总结

    原文: http://www.cnblogs.com/zhiranok/archive/2012/05/13/cpp_multi_thread.html 在开发C++程序时,一般在吞吐量.并发.实时性 ...

  10. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...