您现在的位置是: 首页 » 网页代码 » css怎么让图片居中?
网页代码

css怎么让图片居中?

网站优化小编2020年1月16日 128人已围观

在前端页面的开发中,图片的显示方法有两种,分别为:img标签显示图片,background属性设置为背景图片显示。那么我们如何使用css设置图片居中呢?

网站运营中栏目排名优化技巧

css设置背景图片居中:

1、设置背景图片居中:

css中的background-position属性就可以实现背景图片的水平和垂直方向居中对齐,下面我们通过简单的代码示例来介绍background-position属性是如何设置背景图片居中显示的。

我们先使用background属性显示背景图片:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片居中</title>
        <style>
            *{margin: 0;padding:0;}
            .demo{
                width: 400px;
                height: 300px;
                margin: 50px auto;
                border: 1px dashed #000;
                background-image:url(1.jpg) ;
                background-size:200px 160px ;
                background-repeat:no-repeat ;
            }
        </style>
    </head>
    <body>
        <div class="demo">
         
        </div>
    </body>
</html>

效果图:

网站运营中栏目排名优化技巧

1、background-position使用像素设置背景图片居中(知道背景图片的大小)

background-position:100px 70px ;  /*宽的一半,高的一半*/

效果图:

网站运营中栏目排名优化技巧

2、background-position使用50%设置背景图片居中,很方便

background-position:50% 50% ;

3、background-position使用center设置背景图片居中,很方便。(第2个center可以省略)

background-position:center center;

上述background-position的三种设置方法都可以实现背景图片的居中,background-position属性的第一个值设置水平位置,第二个值设置垂直位置。

2、利用display:table-cell来实现img标签图片的水平和垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>img图片居中</title>
        <style>
            .demo{
                width: 400px;
                height: 300px;
                border: 1px dashed #000;
                display: table-cell; /*主要是这个属性*/
                vertical-align: middle;
                text-align: center;
            }
            .demo img{
                width: 200px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <img src="1.jpg" />
        </div>
    </body>
</html>

效果图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:441天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:4966 条
  • 文章评论:3312 条
  • 微信公众号:扫描二维码,关注我们