-
<!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在内联元素实际存在 消灭空白 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. 默认 inline -- img,span,strong,em,未知元素 inline-block -- input,button table-cell -- td 2. 改变属性 display:block position:absolute float:left 3. 不起作用 不是不起作用，是太短 -- 行高？ie7+ table-cell作用到自身元素 4. 个数不定文字内容和图片垂直居中对齐查看全部
-
vertical-align 1. inherit 2. 线 baseline,top,middle,bottom 3. 文本 text-top,text-bottom 4. 上标下标 sub,super 5. 数值百分比 20px,2em,20% 百分比值相对于line-height计算 共性 a. 都带数字 b. 都支持数值 margin,letter-spacing,word-spacing,vertical-align c. 行为表现一致查看全部
-
vertical-align:起作用的元素是 1.inline（行内元素）；2.table-cell（单元格）；3.inline-block（行内块元素）查看全部
-
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是根据行高设置的查看全部
-
vertical-align: inline元素、inline-block、table元素才可生效。查看全部
-
vertical－align支持的属性值查看全部
-
vertical-align起作用的前提查看全部
-
文字完全垂直居中——添加height100% v-a:middle辅助inline-block元素查看全部
-
图片完全垂直居中——添加height100% v-a:middle辅助inline-block元素查看全部
举报
0/150
提交
取消