转至: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. Visual Studio2012中搭建WCF项目

    分布式系统:指在系统与系统之间进行通信,系统不再是孤立的,例如:淘宝查看物流信息,或是hao123的天气预报,这些可能都是用的别的系统的web方法. 1.创建空的解决方案 2.新建项目-WCF服务库项 ...

  2. c# winform textbox与combox让用户不能输入

    textbox的ReadOnly属性设置为true combox的Enable属性设置为false 运行后效果如下 点击第一个和第二个,会把按钮text赋值给文本框和combox 并且用户不能输入

  3. yii2源码学习笔记(十一)

    Controller控制器类,是所有控制器的基类,用于调用模型和布局. <?php /** * @link http://www.yiiframework.com/ * @copyright C ...

  4. shell中case的用法学习笔记

    这篇文章主要为大家介绍shell中的case语句:可以把变量的内容与多个模板进行匹配,再根据成功匹配的模板去决定应该执行哪部分代码. 本文转自:http://www.jbxue.com/article ...

  5. poj 3185 The Water Bowls

    The Water Bowls 题意:给定20个01串(最终的状态),每个点变化时会影响左右点,问最终是20个0所需最少操作数? 水题..直接修改增广矩阵即可:看来最优解不是用高斯消元(若是有Gaus ...

  6. dustjs

    http://akdubya.github.io/dustjs/ https://github.com/linkedin/dustjs

  7. QLGame 2d Engine 搭建2d游戏原理

    大家好,2d引擎基于opengl(es) 3d技术,是因为这样比之前的ddraw有很多好处! 1.坐标采用浮点数,可以进行曲线移动 2.如果在ddraw的对图片进行缩放和旋转的时候,是基于点像素的操作 ...

  8. [转贴]watin的一些例子

    Some WatiN ExamplesBelow are some examples of WatiN codes for testing:// find div by idvar div = bro ...

  9. bzoj1049

    第一问类似最长上升序列,只不过因为要满足能修改所以不能直接求比如2 3 4 4 5 最长上升序列长是4,但是最少修改是2,因为一个这个最长上升序列不能保持不变因此我们对a[i]-i,然后求这个新序列a ...

  10. BZOJ_1269_文本编辑器_[AHOI2006]_(Spaly)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1269 和BZOJ_1507很像的题,多了一个反转操作,还是Splay简单区间操作的模板题. 1 ...