html中将怎样一个图片绝对居中

作者:暴躁小n | 创建时间: 2023-06-12
我们制作HTML页面的时候,经常会遇到需要把图片相对居中,让图片正好在水平居中的位置,这个需要我们怎样具体的去实现呢,今天小渔就来为大家讲解一下。...
html中将怎样一个图片绝对居中

操作方法

首先,我们准备好对应的图片,当然这是依照设计图而来的,所以我们还需要一份让图片绝对居中的设计图,一个制作了部分的HTML页面

可以明显的看到这张图片是在这个DIV中水平方向上居中的。既是绝对居中就需要设定position属性,我们需要将图片的position设为absolute,其父级元素的position设为relative。

这样设定之后,我们需要对图片的位置进行进一步的设定,思路是左右应该是占一半,我们设置left为50%即可。

高度应该是随意的,我们姑且将高度(top)设为0。

这样看似做好了,但是细心的朋友会发现,图片并没有水平居中,而是向右偏移了一些。

我们来重新考虑一下,所谓的水平居中指的应该是图片的中线和其父级元素的中线是重合的,我们设置left:50%,只是将图片的左端点和父级元素的中线对齐了,我们还需要为图片设定为图片宽度一般的外边距。

我们为图片设置margin-left为负的图片宽度的一半,这样图片会向左移动一半,我们的图片就绝对剧中个。

温馨提示

这个问题很简单,关键是我们需要为图片设置一个左边距。
点击展开全文

更多推荐