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

发布时间：2018-09-07 09:48 所属栏目：30 来源：站长网

导读：图片与文本混排的时候想让图片相对于文本垂直居中实现方法如下：注：display为inline-block的元素既可以像块状元素一样定义高度宽度，又可以和内联元素（比如文字）排列在一行。最常见的莫过于设计导航时，既可以像inline元素那样实现居中，又可以设置像bl

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

注：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、Opera、Safari支持*/
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值*/
}

（编辑：ASP站长网）