图片margin:0 auto;为何不居中
关键:
img元素 display设为block
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> </head> <style type="text/css"> </style> <body> <span id=""> 因为此时图片是inline水平,就算没有width,其也不会占据整个容器. </span> <img src="../卡拉卡拉.jpg" style="display:block;width:200px;margin: 0 auto;"/> <span id="" class=""> 因为此时图片是block水平,就算没有width,也会占据整个容器(不能一行显示) </span> </body> <script type="text/javascript" charset="utf-8"> </script> </html>
效果: