CSS位置,使用元素中心来定位元素,并使用百分比 [英] CSS Position using center of element to position element using percentage

查看:438
本文介绍了CSS位置,使用元素中心来定位元素,并使用百分比的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好,我在制作一个网站,但我刚意识到,当我要放置html元素时,它将使用该元素的右侧来放置该元素。这是我的意思的示例。我试图使用百分比将图像放置在中心。我的CSS代码的精简版: .image {position:absolute; right:50%;
因此,当我加载网站时,它显示在右边图片的边角为50%,而不是图片的中心为50%。无论如何,是否可以使用图像的中心将图片定位为50%,而不是图片的左边缘或右边缘为50%?我不希望使用 position:absolue; right:45%之类的图片来移动图片,而是使用图片的中心来定位图片。如果您需要更多说明,请让我知道。

Hi so I was making a website and I just realized that it when I want to position the html element, it will position the element using the right side of it. Here's an example of what I mean. I was trying to position an image in the center using percentages. Trimmed down version of my css code: .image{position:absolute;right:50%; So when I loaded the website, it shows up with the right corner of the picture at 50%, not the center of the image at 50%. Is there anyway to position using center of the image to position the picture at 50%, and not the left or right edge of the picture being at 50%? I don't want something like position:absolue;right:45% to move the picture over, but instead use the center of the picture to position the picture. If you need any more clarification just let me know.

推荐答案

设置图像的宽度,然后设置左右边距

Set a width for the image and then set the left and right margins to auto.

` {width: whatever you want; margin-left: auto; margin-right: auto; }  `

这篇关于CSS位置,使用元素中心来定位元素,并使用百分比的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆