阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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的教程都有!

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

    目录
    目录