css-当图片宽度大于父元素宽度时如何使图片居中显示

最新推荐文章于 2022-08-10 11:08:37 发布

vivianlisunny

最新推荐文章于 2022-08-10 11:08:37 发布

阅读量1.9k

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/vivianlisunny/article/details/77431923

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

如果图片的宽度大于父元素的宽度，不能使用margin：0 auto；(图片宽度小于父元素宽度时使用)或者text-align；center；让图片居中。这种情况有两种方法处理：
1、使用定位流让图片居中：这种方法有明显的弊端，需要知道图片的宽度

<head>
    <meta charset="UTF-8">
    <title>图片居中方式</title>
    <style>
        .father{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            border: 5px solid red;
            box-sizing: border-box;
            text-align: center;
        }
        .son{
            position: absolute;
            left: 50%;
            /*宽度为图片宽度的一半*/
            margin-left: -206px;
        }
    </style>
</head>
<body>
<div class="father">
    <img src="tab.jpg" class="son">
</div>
</body>

2、使用margin: 0 -100%;这种方法父元素必须text-align: center;

<head>
    <meta charset="UTF-8">
    <title>图片居中方式</title>
    <style>
        .father{
            width: 200px;
            height: 100px;
            margin: 0 auto;
            border: 5px solid red;
            box-sizing: border-box;
            text-align: center;
        }
        .son{
            margin: 0 -100%;
        }
    </style>
</head>
<body>
<div class="father">
    <img src="tab.jpg" class="son">
</div>

vivianlisunny

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css-当图片宽度大于父元素宽度时如何使图片居中显示

如果图片的宽度大于父元素的宽度，不能使用margin：0 auto；(图片宽度小于父元素宽度时使用)或者text-align；center；让图片居中。这种情况有两种方法处理： 1、使用定位流让图片居中：这种方法有明显的弊端，需要知道图片的宽度<head> <meta charset="UTF-8"> <title>图片居中方式</title> <style>
复制链接

扫一扫