当图片和文本在一行的时候显示时 效果很奇葩
文字和图片根本对不齐
想让文本对齐在图片垂直居中
这时候一般的方法是 图片 和 文本盒子 设置为 行内快(inline-block)
图片给高度
文本盒子不要给高度
给他们都设置 vertical-align:middle;
<!doctype html> <html> <head> <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码--> <meta http-equiv="Content-Type" content="textml; charset=utf-8" /> <!--当前页面的三要素--> <title>美女 - 木马老师</title> <meta name="Keywords" content="关键词,关键词" /> <meta name="description" content="描述" /> <!--css,js--> <style type="text/css"> *{margin:0;padding:0;} body{font:14px '微软雅黑'; color:#000;} ul{list-style:none;} /* wrap start */ .wrap{width:380px;margin:100px;} .wrap li{border-bottom:1px solid #ccc;padding:20px 0;} .wrap li img{width:90px;height:90px;border:4px solid #ccc;border-radius:50%;display:inline-block;vertical-align:middle;} .wrap li div{display:inline-block;width:260px;vertical-align:middle;margin-left:10px;} .wrap li img:hover{border-color:#fe9900;} h4{padding-bottom:10px;} h4:hover,p:hover{color:#fe9900;} /*end wrap*/ </style> </head> <body> <!-- wrap start --> <ul class='wrap'> <li> <img src="images/1.jpg" alt="meinv" /> <div> <h4>AmyRoiland</h4> <p>「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</p> </div> </li> <li> <img src="images/1.jpg" alt="meinv" /> <div> <h4>AmyRoiland</h4> <p>「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</p> </div> </li> <li> <img src="images/1.jpg" alt="meinv" /> <div> <h4>AmyRoiland</h4> <p>「Amy Roiland」美国洛杉矶</p> </div> </li> <li> <img src="images/1.jpg" alt="meinv" /> <div> <h4>AmyRoiland</h4> <p>「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</p> </div> </li> </ul> <!-- end wrap --> </body> </html>图片路径自己换一下
