-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } p{ text-align:justify; background-color: #eee; line-height: 0; } img{ width: 150px; } .justify-fix{ display:inline-block; width: 150px; vertical-align: top; } </style> </head> <body> <p> <img src="http://img4.imgtn.bdimg.com/it/u=2968019053,3099143592&fm=11&gp=0.jpg"> <img src="http://img4.imgtn.bdimg.com/it/u=2968019053,3099143592&fm=11&gp=0.jpg"> <img src="http://img4.imgtn.bdimg.com/it/u=2968019053,3099143592&fm=11&gp=0.jpg"> <img src="http://img4.imgtn.bdimg.com/it/u=2968019053,3099143592&fm=11&gp=0.jpg"> <i class="justify-fix"></i> <i class="justify-fix"></i> <i class="justify-fix"></i> </p> </body> </html>查看全部
-
vertical-align和line-height在內(nèi)聯(lián)元素實(shí)際存在 消滅空白 img{ vertical-align:baseline; line-heigth:1.5; font-size:24px; /* display:block; margin:auto; */ /* vertical-align:middle; */ /* line-height:0; */ /* font-size:0; */ } 近似垂直居中 img{ vertical-align:middle; line-height:250px; } 兼容ie6 <p> <img> <p>查看全部
-
vertical-align 1. 默認(rèn) inline -- img,span,strong,em,未知元素 inline-block -- input,button table-cell -- td 2. 改變屬性 display:block position:absolute float:left 3. 不起作用 不是不起作用,是太短 -- 行高?ie7+ table-cell作用到自身元素 4. 個數(shù)不定文字內(nèi)容和圖片垂直居中對齊查看全部
-
vertical-align 1. inherit 2. 線 baseline,top,middle,bottom 3. 文本 text-top,text-bottom 4. 上標(biāo)下標(biāo) sub,super 5. 數(shù)值百分比 20px,2em,20% 百分比值相對于line-height計算 共性 a. 都帶數(shù)字 b. 都支持?jǐn)?shù)值 margin,letter-spacing,word-spacing,vertical-align c. 行為表現(xiàn)一致查看全部
-
vertical-align:起作用的元素是 1.inline(行內(nèi)元素);2.table-cell(單元格);3.inline-block(行內(nèi)塊元素)查看全部
-
vertical-align:起作用的:圖片、按鈕、文字、單元格;查看全部
-
浮動會讓 vertical-align查看全部
-
vertical-align:baseline; line-height:36px;查看全部
-
vertical-align: inline水平: <img>、<span>、<strong>、<em> inline-block:<input>(IE8+)、<button>(IE8) table-cell元素:<td>查看全部
-
原理:vertical-align是根據(jù)行高設(shè)置的查看全部
-
vertical-align: inline元素、inline-block、table元素才可生效。查看全部
-
vertical-align支持的屬性值查看全部
-
vertical-align起作用的前提查看全部
-
文字完全垂直居中——添加height100% v-a:middle輔助inline-block元素查看全部
-
圖片完全垂直居中——添加height100% v-a:middle輔助inline-block元素查看全部
舉報
0/150
提交
取消