阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS 图片布局

      img 居中

      其实上面的方法一道八变通一下,都可以实现图片的居中,这里再分享一个奇技淫巧!

      .wrapper{
        width: 400px;
        height: 400px;
        text-align: center;
        border: 2px solid blue;
        background-image: url('./bg.jpg');
        background-repeat: no-repeat;
        background-position: center;
      }
      

      就是 background-position:center

      图片居中对齐

      要让图片居中对齐,可以使用 margin: auto; 并将它放到 块 元素中:

      img {
          display: block;
          margin: auto;
          width: 40%;
      }
      

      图片居中

      缺点:需要添加 font-size: 0; 才可以完全的垂直居中;不过需要注意 html 中#parent 包裹 img 之间需要有换行或空格;熟悉 line-height 和 vertical-align 的基友关系较难

      #parent{
          height: 150px;
          line-height: 150px;
          font-size: 0;
      }
      img#son{vertical-align: middle;} /*默认是基线对齐,改为middle*/
      
      <div id="parent">
          <img src="/images/xx.png" alt="" id="son">
      </div>
      

      (1) 行内 / 行内块级 / 图片

      原理:text-align: center; 控制行内内容相对于块父元素水平居中,然后就是 line-height 和 vertical-align 的基友关系使其垂直居中,font-size: 0; 是为了消除近似居中的 bug

      #parent{
          height: 150px;
          line-height: 150px;  /*行高的值与height相等*/
          text-align: center;
          font-size: 0;   /*消除幽灵空白节点的bug*/
      }
      #son{
          /*display: inline-block;*/  /*如果是块级元素需改为行内或行内块级才生效*/
          vertical-align: middle;
      }
      

      优缺点

      优点:代码简单;兼容性好(ie8+) 缺点:只对行内内容有效;需要添加 font-size: 0; 才可以完全的垂直居中;不过需要注意 html 中#parent 包裹#son 之间需要有换行或空格;熟悉 line-height 和 vertical-align 的基友关系较难

      <!DOCTYPE html>
      
      <html>
          <head>
              <meta charset="utf-8" />
              <title>元素水平居中</title>
              <style>
      
                  /* 默认的图片  */
                  .d1{
                      width: 1200px;
                      border: 3px solid #333333;
                      /* 1.在父元素上面加上  text-align: center;*/
                      text-align: center;
                  }
                  /* 2.已知图片宽度的情况 */
                  .d2{
                      width: 1200px;
                      border: 3px solid #666666;
                  }
                  /* 在要居中的图片上添加 */
                  .d2 img{
                      position: relative;
                      left: 50%;
                      /* 负值,图片宽度的一般 */
                      margin-left: -50px;
                  }
                  /* 3.不知道图片宽度并且图片默认的display改为其他的*/
                  .d3{
                      width: 1200px;
                      border: 3px dashed #666666;
                      text-align: center;
                  }
                  .d3 img{
                      /* 修改图片的display为inline或inline-block */
                      display: inline-block;
                  }
      
                  /* 4.不知道图片的宽度,并且图片的display不为默认,或不为inline、inline-block*/
                  .d4{
                      width: 1200px;
                      border: 3px dashed #666666;
                  }
                  .d4 img{
                      display: block;
                      margin: 0 auto;
                  }
      
              </style>
          </head>
      
          <body>
             <!-- 图片水平居中 -->
             <div class="d1">
                  <img src="eq.png"/>
             </div>
      
             <div class="d2">
                  <img src="eq.png"/>
             </div>
      
             <div class="d3">
                  <img src="eq.png"/>
             </div>
      
             <div class="d4">
                  <img src="eq.png"/>
             </div>
      
          </body>
      
      </html>
      
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录