[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样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
随机推荐
- 关于datagridview单元格不切换焦点无法获得新输入数据的问题解决方法
问题描述:将EXCEL中的数据导入到dataGridView中,然后通过点击toolStripButton对dataGrideView中的数据进行处理,在测试时,向dataGridView中的某个单元 ...
- 坑爹的NSIS转义符:$ (在NSIS的MessageBox中写换行文字)
最近的项目中,发现了NSIS一个比较坑的地方:$ 不但是变量常量的开头,还是一个转义字符. 大家有没有发现,NSIS写的脚本中,如果要让弹出消息框中的文字带换行功能,“\r\n” 是不是很不管用呢? ...
- MVVM Light 一个窗口承载两个视图
MVVM Light 一个窗口承载两个视图 原文地址:http://www.codeproject.com/Articles/323187/MVVMLight-Using-Two-Views 本文 ...
- 如何得到django中form表单里的复选框(多选框)的值( MultipleChoiceField )
直接写代码吧 CHECKBOX_CHOICES = ( ('Value1','Value1'), ('Value2','Value2'), ) class EditProfileForm(ModelF ...
- 用JS实现避免重复加载相同js文件
我们在日常开发过程中,可能有重复加载同一个资源例如:1.js,为了提高性能和用户体验这里我们用原生JS实现同一个资源只加载一次. 下面是 common.js里的JS代码 //使用沙箱模式防止污染外面的 ...
- 【转】ant命令总结
http://feiyeguohai.iteye.com/blog/1295922 ant命令总结 1 Ant是什么? Apache Ant 是一个基于 Java的生成工具. 生成工具在软件开发中用 ...
- LightOj_1408 Batting Practice
题目链接 题意: 击球训练中, 你击中一个球的概率为p,连续击中k1个球, 或者连续击空k2个球, 则训练结束. 求结束训练所击球次数的期望. 思路: 设f[x]为连续击中x个球, 距离结束训练所需要 ...
- nutch 索引
nutch开发环境搭建 nutch-1.3导入eclipse nutch-1.7导入eclipse nutch部署 nutch-1.3linux下部署 nutch-1. ...
- BZOJ 1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏
Description Farmer John 想让她的奶牛准备郡级跳跃比赛,贝茜和她的伙伴们正在练习跨栏.她们很累,所以她们想消耗最少的能量来跨栏. 显然,对于一头奶牛跳过几个矮栏是很容易的,但是高 ...
- mysql优化案例
MySQL优化案例 Mysql5.1大表分区效率测试 Mysql5.1大表分区效率测试MySQL | add at 2009-03-27 12:29:31 by PConline | view:60, ...