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. php cookie详解

    各参数详解 注意: 1   当一个Cookie被删除时,它的值在当前页在仍然有效的.原因是删除cookie实际也是设置cookie,  只是把cookie的值设为‘’或者null,或者把cookie的 ...

  2. 错题集锦（二） -- Java专项

    错题集锦(二) -- Java专项 标签(空格分隔): 找工作 JVM的内存模型 线程共享: 堆(Heap):主要存放一些对象实例 方法区(Method Area / Non-Heap):用于存储已被 ...

  3. error: command 'gcc' failed with exit status 1 的解决办法

    yum install gcc python-devel 之前yum install gcc* 了 所以没成功. wget http://prdownloads.sourceforge.net/doc ...

  4. MyBatis 动态SQL查询，多条件，分页

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...

  5. CALayer总结（二）

    1.CATransaction 事务: UIView有两个方法,+beginAnimations:context:和+commitAnimations,和CATransaction的+begin 和+ ...

  6. DataGridView常用操作

    一.DataGridView列右击菜单事件处理 (1). 添加一个快捷菜单contextMenuStrip1:(2). 给dataGridView1的CellMouseDown事件添加处理程序: pr ...

  7. java中类名.class、实例.getclass()区别

    import java.util.HashSet; import java.util.Iterator; /** * Created by GOD on 2016/1/23. * Class对象的生成 ...

  8. Android中的五大布局和logcat打印日志

    在android中的布局有五大类,有的时候你可能用到一种,但有的时候你也可能需要两种或者三种布局同时一起使用.这五种布局为别为:LinearLayout(线性布局),FrameLayout(框架布局) ...

  9. iOS - OC NSFileManager 文件管理

    前言 @interface NSFileManager : NSObject @interface NSFileHandle : NSObject <NSSecureCoding> NSF ...

  10. DBCP JAVA 连接池

    package com.sinoglobal.db; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...