转至:http://dreamweaver.abang.com/od/divcss/a/vertical-align.htm

一、行高(line-height)法

 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:

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

二、内边距(padding)法

 另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:

p { padding:30px; }

  这段代码的效果和line-height法差不多。

三、模拟表格法

 模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示,用到的CSS属性有display、vertical-align等。 

[html][css]让文字在div中居中的方法[转]的更多相关文章

  1. css 如何使图片与文字在div中居中展示?

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  2. 文字在div中居中

    话不多说,看代码 div class="div1"> <span class="span2">等级分类法拉盛说的分离卡萨丁</span& ...

  3. 让图片在div 中居中的方法

    方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...

  4. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  5. Css文字在div中自动换行

    Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行

  6. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  7. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  8. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  9. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

随机推荐

  1. javascript 单行向上滚动文字

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  2. Hibernate持久化对象

    持久化类应遵循的规则: 有无参构造器,构造器的修饰符>=默认访问控制符 有标识属性,映射数据库表的主键,建议使用基本类型的包装类 每个成员有setter和getter 非final修饰的类 重写 ...

  3. python学习笔记enumerate()与range(len)运用及赋值小计

    #!/uer/bin/env python # _*_ coding: utf-8 _*_ #格式1 a = 'abc' for i in range(len(a)): print a[i],'(%d ...

  4. 4种方法生成二维码 (js 控制canvas 画出 二维码)

    随着网络的迅速发展 发展 发展,二维码的应用将会越来越多.同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧.下面分享了几个非常好的二维码设计.  二维码原理: 二维条码/二维码可以分 ...

  5. Java NIO之Selector

    选择器是JavaNIO重磅推出的一个概念:在旧有的系统中为了跟踪多端口消息,需要为每一个端口配备一个线程做监听:但是有了selector就不需要了,一个Selector可以管理一众渠道(channel ...

  6. tabbar - 取消系统渲染

    /**  1. 取消自动渲染 - 图片***/ viewCon1.tabBarItem.selectedImage = [[UIImage imageNamed:@"tabbar_home_ ...

  7. 转:浅谈命令查询职责分离(CQRS)模式

    原文来自于:http://www.cnblogs.com/yangecnu/p/Introduction-CQRS.html 在常用的三层架构中,通常都是通过数据访问层来修改或者查询数据,一般修改和查 ...

  8. spring mvc 配置

    之前配置spring mvc 怎么都访不到对应的jsp,后来把prefix里面的jsp改为views,就能访问到了,然后再改回jsp也可以访问到 搞了两天,都崩溃了,不管怎样先把没问题的例子给记录下来 ...

  9. Http 与 Socket 区别

    HTTP:超文本传输协议,首先它是一个协议,并且是基于TCP/IP协议基础之上的应用层协议.TCP/IP协议是传输层协议,主要解决数据如何在网络中传输,HTTP是应用层协议,主要解决如何包装数据.HT ...

  10. 【Uvalive 5834】 Genghis Khan the Conqueror (生成树,最优替代边)

    [题意] 一个N个点的无向图,先生成一棵最小生成树,然后给你Q次询问,每次询问都是x,y,z的形式, 表示的意思是在原图中将x,y之间的边增大(一定是变大的)到z时,此时最小生成数的值是多少.最后求Q ...