CSS中如何控制图片居中显示要控制图片居中显示,需要使用CSS样式。下面将介绍几种方法。方法一:使用textalgin可以通过设置父元素的textalign样式来实现图片水平居中显示。例如: .par...
CSS中如何控制图片居中显示
要控制图片居中显示,需要使用CSS样式。下面将介绍几种方法。
方法一:使用text-algin
可以通过设置父元素的text-align样式来实现图片水平居中显示。
例如:
<style>
.parent {
text-align: center;
}
</style>
<div class="parent">
<img src="img.jpg">
</div>
<style>
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.img-container img {
margin: auto;
}
</style>
<div class="img-container">
<img src="img.jpg">
</div>
<style>
.img-container {
position: relative;
width: 100%;
height: 300px;
}
.img-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="img-container">
<img src="img.jpg">
</div>