css 如何使图片水平居中对齐呢?


摘要:
下文讲述在css中让图片水平居中对齐,如下所示:


实现思路:
使用margin:auto属性使其水平居中对齐

例:
让图片在DIV中水平居中对齐

   <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
#divImg{
   background-color:blue;
   width:300px;
   height:300px;
}

#divImg>img{
    display: block;
    margin: 0 auto;
}
</style>
</head>
<body>

<h2>图片在Div中水平居中对齐
   使用margin:auto实现
</h2> 
<div id='divImg'>

     <img src="http://www.maomao365.com/wp-content/uploads/2020/01/css_%E6%96%87%E6%9C%AC%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%AF%B9%E9%BD%90%E7%9A%84%E4%B8%BE%E4%BE%8B%E5%88%86%E4%BA%AB_11572.gif"  style="width:40%">

</div>

</body>
</html>
css 图片水平居中对齐的举例

css 图片水平居中对齐的举例