您的位置：首页 > Web前端 > CSS

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

2017-08-20 19:39 761 查看

如果图片的宽度大于父元素的宽度，不能使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航