CSS 基础学习-149 css图像居中实例

hrs 提交于 2021/11/10 - 19:38 , 周三

如需居中图像,请将左右外边距设置为 auto,并将其设置为块元素

实例代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div{
        width:600px;
        border:2px solid green;
        padding:10px 0px; 
      }   
      img{
        width:300px;
        height:300px;
        display:block;
        margin-left:auto;
        margin-right:auto;
      }   
    </style>
  </head>
  <body>
    <h1>图像居中实例</h1>
    <p>要使图像居中,请将左右外边距设置为auto,并使其成为一个块元素。</p>
    <div><img src="img/flower-4.jpg"></img></div>
  </body>
</html>

运行效果:

css-149.png

标签