多行文本垂直居中div高度确定
父元素高度确定的多行文本、图片、块状元素的垂直居中的方法有两种：
方法一：将内容写入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高度确定的更多相关文章
- css多行文本垂直居中问题研究
css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...
- 四种方法解决DIV高度自适应问题
本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...
- 父类div高度适应子类div
父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...
- 水平垂直居中div（css3）
一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...
- 如何设置div高度为100%
div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...
- 如何让两个 并列的div高度相等
哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致. function $(id){ return document.getElementById(i ...
- div高度自适应（总结：min-height:100px; height:auto;的用法）
对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...
- CSS布局：div高度随窗口变化而变化(BUG会有滚动条)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 限制div高度当内容多了溢出时显示滚动条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...
随机推荐
- js数组小结
1.js数组使用sort()排序 var a = ["1","12","3","4","0"]; d ...
- SSH 5W学习
what SSH的英文全称为Secure Shell,是IETF(Internet Engineering Task Force)的Network Working Group所制定的一族协议,其目的是 ...
- SQL Server 本地时间和UTC时间的相互转换的代码
DECLARE @LocalDate DATETIME, @UTCDate DATETIME, @LocalDate2 DATETIME SET @LocalDate = GETDATE() SE ...
- symfony2路径问题
1.相对路径 例:在上传文件里面,路径设置为 $path = "upload/" 此时路径指向的是web/upload/; 2.绝对路径 例:$path = "/va ...
- WordPress插件制作笔记（三）---Stars Comments Article
wp 文章星级评价 插件 下载地址4:http://pan.baidu.com/s/1eQnGIGU ［articles_star_vote_score_optiontable_serialize_c ...
- deepin 2014 安装后 ，grub出错
今天deepin2013一直出错,就想尝试下2014,so,果断下载安装,然后悲剧的又被坑了. 环境win7位于sda,deepin安装在sdb 安装完毕后,启动报错,找不到设备uuid 无奈之下,重 ...
- 连接oracle数据库出现：ORA-12505,TNS:listener does not currently know of SID given in connect descriptor
Java使用 jdbc:oracle:thin:@11.1.0.14:1521:orcl 连接oracle数据库出现: ORA-12505,TNS:listener does not currentl ...
- Hits per second 下降的几个原因
1.首先看看服务器的资源消耗情况,可能是服务器 处理不了那么多请求, 有很多请求都在等待,此时可以监控一下服务器的资源 看看是不是有很多等待队列 是不是有很多的等待的请求,可用vmstat命令,第一个 ...
- linux下mysql连接jar包的位置在哪里？
linux下连接mysql数据库,肯定也会用到驱动jar包. 该jar包应该被置于jdk安装路径下jre文件夹lib目录的ext文件夹下.例如我的JDK安装路径为/usr/java/jdk1.6.0_ ...
- 怎样在Github参与一个开源项目
转载:http://www.csdn.net/article/2014-04-14/2819293-Contributing-to-Open-Source-on-GitHub 最近一年开源项目特别的热 ...