css文字居中
来源:互联网 发布:三维软件开发公司 编辑:程序博客网 时间:2024/05/16 06:25
有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法。
首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释: “ This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.”
实际上,一个Box中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的。前面定义了一个60px的高度,但是这个Box中存在很多行,那段文本并不能对齐到中央。因此希望那段文本对齐中间,需要给它定义一个line-height的属性,让line-height为60px,作用于一行的vertical-align就可以工作了。
如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现:
CSS代码:
#div-a{
height
:
60px
;
line-height
:
60px
;
}
XHTML代码:
<
div
id="div-a">
......
</
div
>
如果还想让div里的文字水平居中,加上“text-align:center;”即可;代码如下:
CSS代码:
#div-a{
text-align:center;
height:60px;
line-height:60px;
}
XHTML代码:
<
div
id="div-a">
....
</
div
>
说明:如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。
但是,如果是多行文字,上面的垂直居中的方法就不行了,得用变通的方法实现;这里建议使用table方法,在table外面再套上相应的div,
代码如下:
<
table
>
<
tr
><
td
style="vertical-align:middle;height:300px;
</
td
></
tr
>
</
table
>
多行文字居中还有另外一种方法:
多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top 就行:
.middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}
优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度
如何使图片在DIV中垂直居中,可以用背景的方法。如下:
body
{
BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center;
}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"。
- CSS图片文字居中
- css文字居中 小结
- CSS 文字 垂直 居中
- css 文字垂直居中
- css - div - 文字居中
- CSS文字垂直居中
- css文字居中
- css 让文字垂直居中
- CSS 中Div文字居中
- div+CSS 文字垂直居中
- css+div 文字居中问题
- div+css 关于文字居中
- div+css文字垂直居中
- div+css文字垂直居中
- css 图片 文字居中对齐
- div+css文字垂直居中
- div+css文字垂直居中
- css 居中 table 文字 图片
- [题解]bzoj1014 火星人prefix
- 【HDU1024】Max Sum Plus Plus(dp)
- Linux字符设备与块设备的区别与比较
- 旋翼问答:升力是怎样产生的?
- XSS的高级処理
- css文字居中
- spring boot 默认模板返回方式
- javaweb 解出与svn 服务器的绑定。
- Ubuntu 16.04 下如何安装Ossec
- Just a Hook
- redis安装-单机版
- 了解各种不同意义的new
- Docker 使用教程
- 掌握Bitmaps