父元素高度确定的多行文本、图片、块状元素的垂直居中的方法有两种：

方法一：将内容写入table(包括tbody、tr、td)中的td标签里，同时设置 vertical-align：middle。

css中属性 vertical-align只有在父元素为 td 或 th 时，才会生效。例如：

<body>

<table><tbody><tr><td class="box">

<div>

    <p>我是垂直居中的</p>

    <p>我是垂直居中的</p>

    <p>我是垂直居中的</p>

    <p>我是垂直居中的</p>

    <p>我是垂直居中的</p>

</div>

</td></tr></tbody></table>

</body>

css：

table td{height:300px;background:#000}

方法二:

html代码：

给父容器添加display:table-cell和vertical-align:middle;

<div class="div1">

    <div>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

    </div>

</div>

css代码：

<style>

.div{

    height:400px;

    background:#eee;

    display:table-cell;

    vertical-align:middle;

}

</style>

　　

多行文本垂直居中div高度确定的更多相关文章

  1. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  2. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  3. 父类div高度适应子类div

    父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...

  4. 水平垂直居中div（css3）

    一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...

  5. 如何设置div高度为100%

    div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...

  6. 如何让两个 并列的div高度相等

    哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致. function $(id){ return document.getElementById(i ...

  7. div高度自适应（总结：min-height:100px; height:auto;的用法）

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  8. CSS布局：div高度随窗口变化而变化(BUG会有滚动条)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 限制div高度当内容多了溢出时显示滚动条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...

随机推荐

  1. 图的割点 桥 双连通（byvoid）

    [点连通度与边连通度] 在一个无向连通图中,如果有一个顶点集合,删除这个顶点集合,以及这个集合中所有顶点相关联的边以后,原图变成多个连通块,就称这个点集为割点集合.一个图的点连通度的定义为,最小割点集 ...

  2. C++程序设计实践指导1.1删除序列中相同的数改写要求实现

    改写要求1:改写为以指针为数据结构 #include <iostream> #include <cstdlib> using namespace std; class ARP ...

  3. Oracle数据库之间数据同步

    这段时间负责某个项目开发的数据库管理工作,这个项目中开发库与测试数据库分离,其中某些系统表数据与基础资料数据经常需要进行同步,为方便完成指定数据表的同步操作,可以采用dblink与merge结合的方法 ...

  4. 蜘蛛牌（hdu 1584 DFS）

    蜘蛛牌 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. 利用ICommand和ITool重写Arcengine中控件的事件

    Arcengine窗体开发中,不同命令或者工具可能会触发同一控件的同一事件,这样会造成该事件中代码的混乱.以主窗体的AxMapcontrol控件为例,当开始画图时因为有很多种类型的Feature,所以 ...

  6. Typecho 代码阅读笔记（三） - 插件机制

    转载请注明出处:http://blog.csdn.net/jh_zzz 以 index.php 为例: /** 初始化组件 */ Typecho_Widget:: widget('Widget_Ini ...

  7. javascript之Function函数

    在javascript里,函数是可以嵌套的. 如: function(){ funcrion square(x){ return x*x;  } return square(10); } 在javas ...

  8. SQL Server 2008空间数据应用系列七：基于Bing Maps(Silverlight) 的空间数据展现

    原文:SQL Server 2008空间数据应用系列七:基于Bing Maps(Silverlight) 的空间数据展现 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft ...

  9. 你真的会玩SQL吗？Top和Apply

    原文:你真的会玩SQL吗?Top和Apply 本章预先想写一些Top和Apply基本的用法,但好像没什么意义,所以删掉了一些无用的东西,只留下几个示例,以保证系列的完整性. Top和Apply解决的常 ...

  10. SVN的错误： working copy locked

    提示:your working copy appears to be locked. run cleanup to amend the situation. 产生这种情况大多是因为上次svn命令执行失 ...