CSS如何让图片居中显示

发布时间:2022-02-22 15:41:22 作者:iii
来源:亿速云 阅读:292

本篇内容主要讲解“CSS如何让图片居中显示”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS如何让图片居中显示”吧!

一、display:table-cell

HTML 代码如下:

<div class="img_wrap">
      <img src="../images/w3cschool.png">
</div>

CSS 代码如下

.img_wrap{
    width:700px;
    height:350px;
    border:1px dashed #ccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }

二、采用背景法

html 代码:

<div class="img_wrap"></div>

CSS 代码:

.img_wrap{
    width:700px;
    height:350px;
    border:1px dashed #ccc;
    background: url("../images/w3cschool.png") no-repeat center center;
    }

三、line-height

此方法是在图片外用 p 标签,通过设置 line-height 使图片垂直居中:

HTML 代码:

<div class="img_wrap">
        <p><img src="../images/ss.png" alt=""></p>
</div>

CSS 代码:

.img_wrap{
    width:700px;
    height:350px;
    border:1px dashed #ccc;
    text-align: center;
}
.img_wrap p{
     width: 700px;
     height:350px;
     line-height: 350px;
}
.img_wrap p img{
     vertical-align: middle;
}

到此,相信大家对“CSS如何让图片居中显示”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. bootstrap让图片居中显示的方法
  2. css3如何让文字垂直居中显示

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:缩减SCSS 50%样式代码的方法有哪些

下一篇:CSS怎么设置首行缩进

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》