多行文本垂直居中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= ...
随机推荐
- 初识KMP
KMP简介 KMP是一种由Knuth(D.E.Knuth).Morris(J.H.Morris)和Pratt(V.R.Pratt)设计的字符串匹配算法.对目标串T[0:n-1]中查找与之匹配的模式串P ...
- 求a，b在区间上的公倍数个数
给你两个数 a,b.问你区间 [1,N]中都是有多少个数是a,b的公倍数.当数据很大的时候,遍历肯定会超时.其实,我们可以首先求出 lcm(a,b).因为我们知道(a,b)公倍数都是它最小公倍数的倍数 ...
- HTML5 canvas 在线画笔绘图工具（一）
HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...
- CSS3 @font-face 指定英文网页字体
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体.可能有人要问 ...
- 串口WIF简单调试
/*********************************************************************** Title:Wifi串口调试 Hardware: Wi ...
- 如果设置Keil从C代码编译出来的hex文件地址从0x8000开始
和MON51的设置一样,这样作:1.把Startup.a51拷贝到工程目录加入工程,修改125行的 CSEG AT 0 为 CSEG AT 0X8000 ...
- Why Does Qt Use Moc for Signals and Slots（QT官方的解释：GUI可以是动态的）
GUIs are Dynamic C++ is a standarized, powerful and elaborate general-purpose language. It's the onl ...
- QT是否流行还是和历史有关啊（各个平台不同时间的方案都讲到了）
这个还是和历史有关啊..现在基于Qt的桌面软件越来越多的...许多GTK的也在向Qt迁移..可以说在XP时代,微软自己有一套MFC,和成熟的vs系列开发工具..而Qt-Creator是09左右才有项目 ...
- SWFUpload批量上传插件
SWFUpload是一个批量上传插件,在HTML4.1里面,估计也只有Flash+javascript配合才能够做到了.先复制个重要的网址,这个应该是官方的文档了,相当齐全. http://leeon ...
- 如何在WPF程序中使用ArcGIS Engine的控件
原文 http://www.gisall.com/html/47/122747-4038.html WPF(Windows Presentation Foundation)是美国微软公司推出.NET ...