如何实现div图像在div内水平居中有几种方法：使用text-align:center和display:flex;justify-content:center;两种方法。
使用text-align:center实现div图像在div内水平居中
可以通过以下步骤实现：
- 为包含图片的div元素设置布局方式（display）为block或者inline-block（因为默认div元素具有块状布局，因此可以省略这一步）；
div {
display: inline-block;
}
- 设置该div元素的父元素布局（text-align）为center。
.container{
text-align:center;
}
使用display:flex和justify-content:center实现div图像在div内水平居中
可以通过以下步骤实现：
- 为包含图片的div元素设置布局方式（display）为flex，并将沿主轴（即x轴，水平方向）方向的对齐方式（justify-content）设置为center。
.container{
display:flex;
justify-content:center;
}
实例
<!DOCTYPE html>
<html>
<head>
<title>如何实现div 图片在DIV内水平居中的攻略</title>
<style type="text/css">
.container{
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
.container img{
display: inline-block;
}
.text-center{
text-align: center;
}
.flex-center{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container text-center">
<img src="image.jpg" alt="image" />
</div>
<div class="container flex-center">
<img src="image.jpg" alt="image" />
</div>
</body>
</html>
上面的示例演示了如何实现div 图片在DIV内水平居中的两种方法，第一个div使用了text-align:center，第二个div使用了display:flex和justify-content:center。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何实现div 图片在DIV内水平居中 - Python技术站
微信扫一扫 
支付宝扫一扫 