From: http://realazy.org/blog/2007/03/10/none-table-elements-valign/
非已知高度的垂直对齐的条件:
第一个比较好理解,第二个很多人可能会忽略。比如,很多人在图片与文本混排的时候想让图片相对于文本垂直居中除了用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
。
分享到:
相关推荐
NULL 博文链接:https://w-shuang13-163-com.iteye.com/blog/1141499
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 <...
Word 表格上下竖线不对齐时快速对齐方法 在使用 Word 编辑表格时,遇到竖线不对齐的问题是非常常见的。这可能是由于表格中的列宽或行高设置不当所引起的。今天,我们将介绍一个快速对齐 Word 表格竖线的方法,无论...
本文实例讲述了JS实现控制表格行内容垂直对齐的方法。分享给大家供大家参考。具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶、可以居中、可以底部对齐 <!DOCTYPE html> <...
前端表格文字对齐及我的好兄弟
CAD文字对齐插件 输入ap点击文件加载 启动命令dq 多种文字对齐方式 多行文字对齐 表格内多行文字对齐 表格内单行文字左对齐 表格内单行文字中对齐
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...
解决DBGERIEH文本中对齐问题,DBGERIEH文本并不能垂直中对齐,当行高较大时不美观,修改DBGERIEH.pas可达到垂直中对齐
这两天写个页面css的时候用到了vertical-align属性,使用...长度> | inherit 说明: 设置元素内容的垂直对齐方式 值: baseline:基线对齐;sub:下标;super:上标;top:顶端对齐;text-top:与文本的顶端对齐;middl
将对象通过console打印成表格样式(类似控制台mysql查询) 支持list,List<Object> ,Object[],Iterator,Object等,不支持如:List<Integer> 等泛型为基本数据类型的集合。