CSS 图片布局

🌙
手机阅读
本文目录结构
axihe

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>


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang