[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样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
随机推荐
- vs2005用正则表达式统计有效代码行数
正则表达式:^:b*[^:b#/]+.*$ 需要注意:#开头和/开头或者空行都不计入代码量. 如果需要只统计代码文件的代码量,可以按住Ctrl+Shift+F之后选择查找文件的类型. Form:htt ...
- PHP优化小结
1.echo 比 print 快,并且使用echo的多重参数(指用逗号而不是句点)代替字符串连接,比如echo $str1,$str2.如果使用echo $str1.$str2 就会需要 PHP 引擎 ...
- linux 下C语言编程库文件处理与Makefile编写
做开发快3年了,在linux下编译安装软件算是家常便饭了.就拿gcc来说,都有不下10次了,可基本每次都会碰到些奇奇怪怪的问题.看来还是像vs.codeblocks这样的ide把人弄蠢了.便下定决心一 ...
- 跨域Ajax请求WebService方法
一.允许跨域Ajax请求,更改如下配置: 在要调用的WebService上面添加特性标签: 二.以如下返回用户信息的WebService方法为例 三.在另一个网站上通过Ajax访问webService ...
- 关于回波损耗 和 驻波比的摘要 Return Loss and VSWR
关于回波损耗 和 驻波比的摘要 以下摘自:http://www.soontai.com/cal_rtvswr.html RL = 20log((VSWR+1) / (VSWR-1)) VSWR = ( ...
- bzoj 2401: 陶陶的难题I 数论
2401: 陶陶的难题I Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 89 Solved: 24[Submit][Status] Descript ...
- Qt的事件模型(5种使用办法,通常重新实现event handler即可。只有定义控件才需要管理信号的发射)
Qt的事件模型 1.事件的概念 应用程序对象将系统消息接收为 Qt 事件.应用程序可以按照不同的粒度对事件加以监控.过滤并做出响应. 在 Qt 中,事件是指从 QEvent继承 的对象.Qt将事件发送 ...
- delphi非IE内核浏览器控件TEmbeddedChrome下载|TEmbeddedChrome代码
下载地址: 点击下载 代码示例: 在TForm的oncreate方法中写入一些代码 procedure TForm1.FormCreate(Sender: TObject); begin Chromi ...
- Codevs_1040_[NOIP2001]_统计单词个数_(划分型动态规划)
描述 http://codevs.cn/problem/1040/ 与Codevs_1017_乘积最大很像,都是划分型dp. 给出一个字符串和几个单词,要求将字符串划分成k段,在每一段中求共有多少单词 ...
- DevExpress控件汉化类 z
更新了一些字段,VER9.3.3 using System; using DevExpress.XtraEditors.Controls; using DevExpress.XtraGrid.Loca ...