非已知高度的垂直对齐的条件:
1.表格单元格 2.行内块(inline-block)
第一个比较好理解,第二个很多人可能会忽略。比如,很多人在图片与文本混排的时候想让
图片相对于文本垂直居中除了用IE的私有特性 valign="absmiddle"别无他法。记住,
默认下图片就是属于inline-block,你只需简单的img {vertical-align:middle;}即可。
那么,我们进入主题。现在我们由于某些特殊需要
两个并排的div想实现垂直居中。如前所述,
div非表格,但是当代的浏览器中除了IE都支持display:table-cell。恰好,IE支持dispaly:inline-block,那么我们就用两种方式为当代浏览器实现非表格的垂直居中,殊途同归。
HTML如下:
<div id="div1">blah blah...看见我居中了吗?</div>
<div id="div2">
<p>blah blah...</p>
....
</div>
CSS如下:
#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}
我们来重点分析CSS。如您所知,*property是一个只有IE(包括IE7)才能解析的hack. 那么为何是inline而不是inline-block呢?这跟IE的变态工作方式有关,具体不深究。在此你只需知道加上zoom:1后,就等价于inline-block。另外,如果是a, span等非block的元素,则按正常方式display:inline-block。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Realazy" />
<title>未知高度,div垂直居中的一个跨浏览器方案</title>
<style type="text/css" media="screen">
/* <![CDATA[ */
#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}
#div1 {color:red;}
/* ]]> */
</style>
</head>
<body>
<h1>未知高度,<code>div</code>垂直居中的一个跨浏览器方案</h1>
<p>返回<a href="http://www.blueidea.com/tech/web/2007/4629.asp">未知高度的非表格垂直对齐</a></p>
<div id="bd">
<div id="div1">blah blah...看见我居中了吗?</div>
<div id="div2">
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
</div>
</div>
</body>
</html>
分享到:
相关推荐
radio和文字垂直对齐,单选框和文字垂直对齐,兼容各大主流浏览器,附带样例代码,一看就会,一用网不了!呵呵
非表格,一般就是指Div了。在表格中垂直居中很简单,非表格呢,可以用两种方法。
本文实例讲述了JS实现控制表格单元格垂直对齐的方法。分享给大家供大家参考。具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 <!DOCTYPE html> <html> <head> [removed] function valignCell...
在垂直方向上,可以设定单元格的对齐方式,分别有居上、居中、居下3种。 基本语法 语法解释 TOP为居上,MIDDLE为居中,MOTTOM为居下。 文件范例:10-31.htm 设定单元格的垂直对齐方式。01 <!– ——————...
1 这个软件可以自动、批量地转换文本文件。 2 使得文件的每一行内容按中间一个字符串(例如 =)垂直对齐。 3 将文件中的\t全部转换为4个空格。
Div垂直对齐 CSS+Div 底端对齐 垂直对齐
垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera…如发现问题有劳回复评论! ...
通过标记的VALIGN属性设定表格标题的垂直对齐。01 <!– —————————— –>02 <!– 文件范例:10-16.htm –>03 <!–文件说明:设定表格标题的垂直对齐–>04 <!– —————————— –>05 <...
本文实例讲述了JS实现控制表格行内容垂直对齐的方法。分享给大家供大家参考。具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶、可以居中、可以底部对齐 <!DOCTYPE html> <...
前端表格文字对齐及我的好兄弟
CAD文字对齐插件 输入ap点击文件加载 启动命令dq 多种文字对齐方式 多行文字对齐 表格内多行文字对齐 表格内单行文字左对齐 表格内单行文字中对齐
word表格上下竖线不对齐时快速对齐方法
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...
这两天写个页面css的时候用到了vertical-align属性,使用...长度> | inherit 说明: 设置元素内容的垂直对齐方式 值: baseline:基线对齐;sub:下标;super:上标;top:顶端对齐;text-top:与文本的顶端对齐;middl
解决DBGERIEH文本中对齐问题,DBGERIEH文本并不能垂直中对齐,当行高较大时不美观,修改DBGERIEH.pas可达到垂直中对齐
将对象通过console打印成表格样式(类似控制台mysql查询) 支持list,List<Object> ,Object[],Iterator,Object等,不支持如:List<Integer> 等泛型为基本数据类型的集合。