软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 未定义高度的非表格垂直对齐的方法

未定义高度的非表格垂直对齐的方法

图片与文本混排的时候想让图片相对于文本垂直居中实现方法如下:

注:display为inline-block的元素既可以像块状元素一样定义高度宽度,又可以和内联元素(比如文字)排列在一行。最常见的莫过于设计导航时,既可以像inline元素那样实现居中,又可以设置像block元素那样设置单个菜单大小,还可以通过text-indent来隐藏文字显示背景图片。
方法1: 

{
display:table-cell; /* 非IE模拟表格 */
*display: inline; /* IE */
zoom:1; /* 触发hayout */
vertical-align:middle;/* 表格垂直距中 */
}

方法2: 

{
display:inline-block;/* Firefox3 beta、IE8 beta、OperaSafari支持*/
display:-moz-inline-stack;/* Firefox的私有属性,也可以用-moz-inline-box */
*display:inline;zoom:1;/* 这两行,激活IE6/7的layout,实现类似效?*/
vertical-align:middle;/* 行内垂直居中,对Opera有特殊意义,其和文字混排偏移有点离谱 */

line-height:9999em;
overflow:hidden;/* 上面两行,隐藏因设置容器大小而溢出的文字,对Firefox2无效 */
font-size:0;/* 解决上面两行代码在Firefox2下无法隐藏溢出文?*/

width:px;
height:px;
}


方法3: 

{
display:inline-block; /*Firefox3 beta、IE8 beta、Opera、Safari 支持,IE 下触发 inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有属性,也可以用 -moz-inline-box */
zoom:1; /*IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隐藏文字,可用这四个属性 */
/*另外上面隐藏文字,还可以用更简化的方法:line-height:超级大值;font-size:0; */

overflow:hidden; /* 隐藏溢出的内容 */

vertical-align:middle; /* 行内垂直居中,针对 Opera 比较大的偏离 */

width:?px; /*?为任意非auto值*/
height:?px; /*?为任意非auto值*/
}
    相关阅读
    栏目导航
    推荐软件