侧边栏壁纸
博主头像
波哥

80后程序猿&副业达人
爱好:敲代码、搞副业
无干货,不分享!

  • 累计撰写 1,863 篇文章
  • 累计创建 77 个标签
  • 累计收到 16 条评论

目 录CONTENT

文章目录

css如何让img图片居中?css的display属性实现图片居中

波哥
2023-01-06 / 0 评论 / 0 点赞 / 32 阅读 / 424 字

css如何让img图片居中?css的display属性实现图片居中

" "

问题描述

如何通过css怎么让img图片居中显示。

解决方式

首先我们来了解一下display属性实现图片居中的两种方法是什么?

1、利用display的table-cell属性值,再配合text-align: center;与vertical-align: middle;设置图片居中

2、设置display: flex;,利用弹性布局flex来设置img图片的居中

下面我们通过简单的代码示例,详细了解一下这两种方法是怎么实现图片居中的。

1、利用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>

效果图:

image

说明:

在demo盒子中设置display: table-cell;会让demo盒子作为一个表格单元格显示(类似 和 ),在设置text-align: center;就会让img图片水平居中,设置vertical-align: middle;让img图片垂直居中。

2、弹性布局

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>img图片居中</title>

        <style>

            *{margin: 0;padding:0;}

            .demo{

                width: 400px;

                height: 300px;

                margin: 50px auto;

                border: 1px dashed #000;

                display: flex;

                justify-content: center;

                align-items: center;

            }

            .demo img{

                width: 200px;

                height: 150px;

            }

        </style>

    </head>

    <body>

        <div class="demo">

            <img src="1.jpg" />

        </div>

    </body>

</html>

效果图:

image

0

评论区