转至: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. 【转】CHAR CHARACTER VARCHAR NCHAR NVARCHAR NVARCHAR2区别

    http://blog.csdn.net/lhl6688/article/details/44156823?ref=myread oracle提供了五种字符数据类型:char.nchar.varcha ...

  2. php类的方法

    方法就是在类中的function,很多时候我们分不清方法与函数有什么差别,在面向过程的程序设计中function叫做函数,在面向对象中function则被称之为方法. 同属性一样,类的方法也具有pub ...

  3. CI源码学习 一步一步重写 CodeIgniter 框架

    文章:http://www.cnblogs.com/zhenyu-whu/archive/2013/08.html

  4. 使用Runnable接口创建线程-3

    实现Runnable接口的类必须使用Thread类的实例才能创建线程.通过Runnable接口创建线程分为两步: 1. 将实现Runnable接口的类实例化. 2. 建立一个Thread对象,并将第一 ...

  5. Http 与 Socket 区别

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

  6. Swift初体验之图案锁

    这篇在应用上貌似没有价值,貌似我写了好多实际上都没有价值,这里贴出来就是分享下. 自己写swift好多天了,感觉好多东西还是不太懂,边学边做,互勉! 先上图: 代码:下载

  7. [wikioi]最长严格上升子序列

    http://wikioi.com/problem/1576/ 经典的动态规划.我写了个o(n^2)的DP方法. PPT:http://wenku.baidu.com/view/bd290294dd8 ...

  8. ANDROID_MARS学习笔记_S03_001_获取蓝牙匹配列表

    一.代码 1.xml(1)AndroidManifest.xml 增加 <uses-permission android:name="android.permission.BLUETO ...

  9. 杂烩:QWidget、QGraphics、QtQuick

    一说起Qt 大都会想起Qt的GUI编程,具体到某个类的话,最多的就是QWidget类及其子类了. 其实Qt中还有基于项的图形视图,具体来说QGraphicsView,QGraphicsScene,QG ...

  10. [OJ] Permutation Index

    LintCode 197. Permutation Index (Easy) LintCode 198. Permutation Index II (Medium) 感觉这两道题主要考察计算排列组合的 ...