[html][css]让文字在div中居中的方法[转]
转至: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中居中的方法[转]的更多相关文章
- css 如何使图片与文字在div中居中展示?
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- 文字在div中居中
话不多说,看代码 div class="div1"> <span class="span2">等级分类法拉盛说的分离卡萨丁</span& ...
- 让图片在div 中居中的方法
方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
- Css文字在div中自动换行
Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行
- 未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...
- CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
随机推荐
- Python全栈开发之MySQL(二)------navicate和python操作MySQL
一:Navicate的安装 1.什么是navicate? Navicat是一套快速.可靠并价格相宜的数据库管理工具,专为简化数据库的管理及降低系统管理成本而设.它的设计符合数据库管理员.开发人员及中小 ...
- visual studio 生成后事件 Post-Build Event
提出问题:我们的解决方案中有两个可执行程序,主程序运行后,会通过process.start()打开多个子程序.调用process.start的时候,需要指定子程序的可执行路径,把子程序的可执行程序放到 ...
- c# winform 隐藏tabcontrol标签
Apperarance 属性:Faltbuttons SizeMode属性:Fixed 各个TabPage的Text :空 ItemSize : Width=0;Height=1;
- 安装Cocoa 新的依赖管理工具Carthage
Cocoa的依赖管理器,我们已经有了CocoaPods,非常好用,那么为什么还要创建这样一个项目呢?本文翻译自Carthage的Github的README.md,带大家来了解一下这个工具有何不同之处. ...
- mysql-5.5.25-winx64在win7 x64 免安装配置
os:win7 x64 mysql:mysql-5.5.25-winx64 将mysql-5.5.25-winx64.zip 解压缩到F:\mysql-5.5.25-winx64 目录下: 1.将my ...
- 传感器 -UIAccelerometer
// ios 4 之前 UIAccelerometer // ios 5 <CoreMotion/CoreMotion.h> #import "ViewController.h& ...
- visual studio 2010 出现问题,不能设置断点调试了,一运行就未响应,然后程序退出
经网络查找原因,怀疑是插件问题: 解决方案: 1.工具->扩展管理 2.禁用或卸载VS2010的插件(扩展程序)
- webservice 的权限验证
1. http://blog.csdn.net/jaune161/article/details/25602655 2. http://wcp88888888.iteye.com/blog/13993 ...
- logger.debug,logger.info,logger.warn,logger.error,logger.fatal的区别
logger.debug,logger.info,logger.warn,logger.error,logger.fatal的区别 logger.debug,logger.info,logger.wa ...
- Sql中的datetime类型的空值和c#中的DateTime的空值的转换方法
[一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3412796.html] 在NET 2.0以上版本提供了一种新的方法 就是加问号,DateTim ...