有时候,为了网页设计的美观,需要把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代码:

1
2
3
4
#div-a{
height:60px;
line-height:60px;
}

XHTML代码:

1
2
3
<div id="div-a">
......
</div>

  如果还想让div里的文字水平居中,加上“text-align:center;”即可;代码如下:

CSS代码:

1
2
3
4
5
#div-a{
text-align:center;
height:60px;
line-height:60px;
}

XHTML代码:

1
2
3
4
<div id="div-a">
....
 
</div>

  说明:如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。

  但是,如果是多行文字,上面的垂直居中的方法就不行了,得用变通的方法实现;这里建议使用table方法,在table外面再套上相应的div,

代码如下:

1
2
3
4
<table>
<tr><td style="vertical-align:middle;height:300px;
</td></tr>
</table>

  多行文字居中还有另外一种方法:

多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top 就行:

1
2
3
4
5
.middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}

优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器

缺点:
 容器不能固定高度

如何使图片在DIV中垂直居中,可以用背景的方法。如下:

1
2
3
4
body
{
BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center;
}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top  left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"。

实现DIV层内的文字垂直居中(转)的更多相关文章

  1. DIV+CSS如何让文字垂直居中?(转)

    此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...

  2. DIV+CSS如何让文字垂直居中?

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. checkbox与label内的文字垂直居中的解决方案

    <label style="float:left;margin-top:5px;margin-left:10px;cursor:pointer"><input t ...

  4. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  5. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

  6. 关于DIV内文字垂直居中的写法

    最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...

  7. [HTML]DIV+CSS 文字垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. CSS3 定位| Position研究

    视区(视口) 当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域).当我们调整视区大小时,UA 就有可能会改变 ...

  2. Linux学习6-套接字

    套接字 1.什么是套接字? 套接字(socket)是一种通信机制,凭借这种机制,客户/服务器系统的开发工作既可以在本地单机上进行,也可以跨网络进行. 2.套接字应用程序是如何通过套接字来维持一个连接的 ...

  3. G. (Zero XOR Subset)-less(线性基)

    题目链接:http://codeforces.com/contest/1101/problem/G 题目大意:给你n个数,然后让你把这n个数分成尽可能多的集合,要求,每个集合的值看做这个集合所有元素的 ...

  4. Dream_Spark-----Spark 定制版:003~Spark Streaming(三)

    Spark 定制版:003~Spark Streaming(三) 本讲内容: a. Spark Streaming Job 架构和运行机制 b. Spark Streaming Job 容错架构和运行 ...

  5. 编程入门python之定义函数【转】

    编程入门python之定义函数 零基础学编程by学哥 2017-02-06 10:51 今天讲python函数. 输入参数求三角形或圆形或长方形的面积 先输入1个参数:形状类型 1=三角形 2=圆形 ...

  6. crontab机会任务监控

    <1>如何查看自己的计划任务是否成功的执行? 昨天crontab中的同步任务没有执行,不知道是什么原因没有执行,貌似任务hang住了,想查询一下crontab到底问题出在哪里,或者hang ...

  7. Android 5.0 行为变更

    Android 5.0 除了提供诸多新特性和功能外,还对系统和 API 行为做出了各种变更.本文重点介绍您应该了解并在开发应用时加以考虑的一些主要变更. 如果您之前发布过 Android 应用,请注意 ...

  8. 在android 5.0以上,如何判断当前应用是在前台还是后台

    今天在做项目时遇到这个问题,本来很简单的,但是在Android 5.1 的系统上运行却出错了,在网上查找答案后发现原来是在android 5.0 之后getRunningTask()方法被废弃,失效了 ...

  9. C++ Primer读书笔记(2)

    getline(cin,string s)可以读取一整行,包括空白符.使用ctrl+Z结束 字符串字面值与string是不同的类型.两个字符串字面值不能直接相加. 处理string对象中的字符时,C+ ...

  10. EntityFrameWork 图解