[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样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
随机推荐
- 【转】CHAR CHARACTER VARCHAR NCHAR NVARCHAR NVARCHAR2区别
http://blog.csdn.net/lhl6688/article/details/44156823?ref=myread oracle提供了五种字符数据类型:char.nchar.varcha ...
- php类的方法
方法就是在类中的function,很多时候我们分不清方法与函数有什么差别,在面向过程的程序设计中function叫做函数,在面向对象中function则被称之为方法. 同属性一样,类的方法也具有pub ...
- CI源码学习 一步一步重写 CodeIgniter 框架
文章:http://www.cnblogs.com/zhenyu-whu/archive/2013/08.html
- 使用Runnable接口创建线程-3
实现Runnable接口的类必须使用Thread类的实例才能创建线程.通过Runnable接口创建线程分为两步: 1. 将实现Runnable接口的类实例化. 2. 建立一个Thread对象,并将第一 ...
- Http 与 Socket 区别
HTTP:超文本传输协议,首先它是一个协议,并且是基于TCP/IP协议基础之上的应用层协议.TCP/IP协议是传输层协议,主要解决数据如何在网络中传输,HTTP是应用层协议,主要解决如何包装数据.HT ...
- Swift初体验之图案锁
这篇在应用上貌似没有价值,貌似我写了好多实际上都没有价值,这里贴出来就是分享下. 自己写swift好多天了,感觉好多东西还是不太懂,边学边做,互勉! 先上图: 代码:下载
- [wikioi]最长严格上升子序列
http://wikioi.com/problem/1576/ 经典的动态规划.我写了个o(n^2)的DP方法. PPT:http://wenku.baidu.com/view/bd290294dd8 ...
- ANDROID_MARS学习笔记_S03_001_获取蓝牙匹配列表
一.代码 1.xml(1)AndroidManifest.xml 增加 <uses-permission android:name="android.permission.BLUETO ...
- 杂烩:QWidget、QGraphics、QtQuick
一说起Qt 大都会想起Qt的GUI编程,具体到某个类的话,最多的就是QWidget类及其子类了. 其实Qt中还有基于项的图形视图,具体来说QGraphicsView,QGraphicsScene,QG ...
- [OJ] Permutation Index
LintCode 197. Permutation Index (Easy) LintCode 198. Permutation Index II (Medium) 感觉这两道题主要考察计算排列组合的 ...