在CSS中,控制图片居中显示是一个常见的需求。以下详细介绍几种方法来实现图片居中显示。使用textalign属性和父元素的宽度首先,可以通过将img标签放在一个父元素中,并使用textalign属性将...
在CSS中,控制图片居中显示是一个常见的需求。以下详细介绍几种方法来实现图片居中显示。
使用text-align属性和父元素的宽度
首先,可以通过将img标签放在一个父元素中,并使用text-align属性将其水平居中,来实现图片居中显示。假设父元素宽度为500px,如下代码所示:
p {
width: 500px;
text-align: center;
}
img {
display: block;
margin: auto;
}
p {
display: flex;
justify-content: center;
align-items: center;
}
img {
display: block;
}
p {
display: grid;
justify-content: center;
align-items: center;
}
img {
display: block;
}