-
小图标和文字的对齐 vertical-align负值 小图片20px，文字14px，小图片vertical-align：-5px查看全部
-
关注当前元素和父级， 前后并没有直接影响。查看全部
-
vertical-align:super与sub定义查看全部
-
vertical-align:text-bottom实用例子查看全部
-
vertical-align：text-top与text-bottom定义 兼容性很好（IE6，IE7都支持）查看全部
-
vertical-align:bottom定义： 1.inline/inline-block元素：元素底部和整行的底部对齐。 2.table-cell元素：单元格底padding边缘和表格行的底部对齐。 top同bottom vertical-align：middle定义： 1.inline/inline-block元素：元素的垂直中心点和父元素基线上1/2 x-height处对齐。 2.table-cell元素：单元格填充盒子相对于外面的表格行居中对齐。 td单元格不足高度会用padding填充。查看全部
-
（完全）垂直居中 只需设置font-size:0;（line-height：0；）查看全部
-
（近似）垂直居中 图片垂直中心线和X高度中心线对齐。 由于文字下沉，所以X高度中心线低于容器中心线，所以图片中心线低于容器中心线。查看全部
-
容器line-height:0; 图片下边缘与x垂直中心线对齐。默认i标签与x下边缘对齐。 撑开高度为x的1/2高度。查看全部
-
行高变成0 两个基线没有变，对齐同上。有文字部分的内容区域上边变成文字高度中心处查看全部
-
margin下边缘（即边框下边缘）和x下边缘对齐查看全部
-
inline-block基线规范查看全部
-
对于内联元素，vertical-align与line-height虽然看不见，但实际上[到处都是]！ 消除图片下空白的方法： 1.针对vertical-align display:block;margin:auto; 改成线性对齐：bottom,middle,top 2.改变line-height line-height:0或者font-size:0 兼容性：chrome,foxfire,opera,safari,IE7+ IE7：<p><img src=""><!--这里要折行或空格--> </p>查看全部
-
vertical-align起作用的前提条件：应用于inline水平以及‘table-cell’元素。 inline水平元素： ·inline:<img>,<span>,<strong>,<em>,未知元素，… ·inline-block:<input>(IE8+),<button>(IE8+),… ‘table-cell’元素： ·table-cell：<td> 默认状态下：图片，按钮，文字和单元格。 1.display：更改元素的显示水平 2.CSS声明更改元素的显示水平 图片明明vertical-align:middle了，为什么不垂直居中？ 行高设为容器高度值（近似居中） 不是vertical-align:middle没起作用，而是太短，不够居中。（以后详细讲解） 通过行高设置图片垂直居中，IE7+支持。不过IE7有条件：需要图片与父标签换行。 为什么table-cell可以？ 因为table-cell自身起作用。 p{ display:table-cell;vertical-align:middle; } 图片近似垂直居中 实战：个数不定文字内容和图片垂直居中对齐 { display:inline-block;vertical-align:middle; }查看全部
-
vertical-align支持的属性值： 1.inherit继承 2.线类：baseline,top,middle,bottom 3.文本类：text-top,text-bottom 4.上标下标类：sub,super 5.数值百分比类：20px,2em,20%,… 数值与百分比的共性：都带数字，都支持负值（margin，letter-spacing，word- spacing，vertical-align）（上正下负）,行为表现一致 vertical-align的百分比值是相对于line-height计算的！（IE6/IE7下vertical-align百分比值不支持小数line-height）查看全部
举报
0/150
提交
取消