html - 使用 css 定位图像的中心

标签 html css image positioning center

假设我必须将图像放置在正确的位置,但我需要其中心位于该位置。我想将图像放置在 div 的左上角,因此我将图像放置在 div 中,给定position:relative于 div 和位置:图像的绝对值,然后将其顶部和左侧值设置为 0。非常有效,但我需要该图像的中心位于左上角。我会手动设置顶部:-xpx,左侧:-ypx,但我没有任何特定的图像大小值(可能会有很大差异)。 那么有没有什么办法可以这样说:position:absolute-but-i'm-talking-about-the-center;顶部:0px;左:0px;?

真的非常感谢!

马泰奥

最佳答案

您可以使用 javascript 获取图像的大小,然后设置所需的 css left 值。

请注意图像的加载方式,因为它们是异步的,因此在文档准备好时不一定可用。这意味着,除非正确处理图像,否则最终的宽度和高度尺寸将为 0。

关于html - 使用 css 定位图像的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14022407/

相关文章:

html - Twitter Bootstrap - 响应式导航栏

html - 在 2 列中排列多个 div,每 7 个 div 交替

javascript - 图像交换不会返回到原始图像

javascript - bxslider - 幻灯片重叠 - 在 1 帧中显示两张幻灯片

html - 是否可以使用 <tr> 作为父元素绝对放置 <img> 元素?

image - 提高图像质量以通过 OpenCV 读取模糊数字

image - 快速确定图像是照片还是绘图

html - 超过主 Div 高度后 Div 困惑

javascript - 通过 REST API 上的 GET 请求发送图像数据

html - 数字/格重叠