Click here for a jsFiddle link margin-left: 50%;显然可以在使用容器div时工作,因为容器的宽度将与内容的宽度完全相同。(您可能需要添加width: auto;)但是margin-top: -50%;将不起作用,因为容器div的高度将随之改变,因此,您还需要另一个 Package 器div,在其中使用这个margin-top: -50%;,然后您需要通过使用基于正百分比的填充来修复这个错误。显然,可能有其他解决方案来解决这个问题,但解决方案应该是这样的。
5条答案
按热度按时间hec6srdp1#
你可以使用javascript来获得图片的大小,然后设置所需的css left值。
请注意图像的加载方式,因为它们是异步的,所以在文档准备就绪时不一定可用。这意味着除非正确处理图像,否则最终的宽度和高度尺寸将为0。
jbose2ul2#
您应该将图像 Package 在另一个块元素中,并在图像的左侧放置一个负的位置。
大概是这样的
然后给#something一个相对位置,给. imagewrap一个绝对位置,等等......
img
应该和left:-50%
有一个相对位置。kqlmhetl3#
你试过吗
给予吧。
brccelvz4#
不需要使用Javascript,这可以在CSS中完成。
所需的HTML:(显然你必须把div改成img)
所需CSS:
Click here for a jsFiddle link
margin-left: 50%;
显然可以在使用容器div时工作,因为容器的宽度将与内容的宽度完全相同。(您可能需要添加width: auto;
)但是margin-top: -50%;
将不起作用,因为容器div的高度将随之改变,因此,您还需要另一个 Package 器div,在其中使用这个margin-top: -50%;
,然后您需要通过使用基于正百分比的填充来修复这个错误。显然,可能有其他解决方案来解决这个问题,但解决方案应该是这样的。fafcakar5#
也许最简单的解决方案之一是将图像放置在左上角的位置
left: 0px; top: 0px;
,然后使用translate
将其中心移动到这个位置,下面是一个工作代码片段: