-
小圖標和文字的對齊 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 兩個基線沒有變，對齊同上。有文字部分的內(nèi)容區(qū)域上邊變成文字高度中心處查看全部
-
margin下邊緣（即邊框下邊緣）和x下邊緣對齊查看全部
-
inline-block基線規(guī)范查看全部
-
對于內(nèi)聯(lián)元素，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> 默認狀態(tài)下：圖片，按鈕，文字和單元格。 1.display：更改元素的顯示水平 2.CSS聲明更改元素的顯示水平 圖片明明vertical-align:middle了，為什么不垂直居中？ 行高設為容器高度值（近似居中） 不是vertical-align:middle沒起作用，而是太短，不夠居中。（以后詳細講解） 通過行高設置圖片垂直居中，IE7+支持。不過IE7有條件：需要圖片與父標簽換行。 為什么table-cell可以？ 因為table-cell自身起作用。 p{ display:table-cell;vertical-align:middle; } 圖片近似垂直居中 實戰(zhàn)：個數(shù)不定文字內(nèi)容和圖片垂直居中對齊 { display:inline-block;vertical-align:middle; }查看全部
-
vertical-align支持的屬性值： 1.inherit繼承 2.線類：baseline,top,middle,bottom 3.文本類：text-top,text-bottom 4.上標下標類：sub,super 5.數(shù)值百分比類：20px,2em,20%,… 數(shù)值與百分比的共性：都帶數(shù)字，都支持負值（margin，letter-spacing，word- spacing，vertical-align）（上正下負）,行為表現(xiàn)一致 vertical-align的百分比值是相對于line-height計算的?。↖E6/IE7下vertical-align百分比值不支持小數(shù)line-height）查看全部
舉報
0/150
提交
取消