如何在jQuery中的div页面的中间显示一个gif？

编程入门行业动态更新时间:2024-10-27 00:26:36

本文介绍了如何在jQuery中的div页面的中间显示一个gif？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我有一个div，它作为一个页面，它只有一个gif。虽然gif出现在页面的左上角。我想让它出现在页面的中间。下面你可以找到我尝试的HTML和CSS，但它似乎不工作。

< div id =correctGIFdata-role =pagedata-add-back-btn =false> < img src =images / correct.gif> < / div> .correctGIF> img { position：absolute; left：50％; top：50％; }

解决方案

假设你的div是页面大小，并且 position：relative then

#correctGIF> ; img { position：absolute; left：50％; top：50％; display：block; }

会以最 / p>

但是，它的作用是将图片的左上角放在50％位置，因此不会精确居中。 / p>

如果您知道图片的大小，您可以使用负边距调整它。

margin-top： - [插入50％的图像高度] px; margin-left： - [插入50％的图像宽度] px;

因此，例如

margin-top：-100px; margin-left：-100px;

为200x200张图片。

你不知道图像的大小（也许你会经常更改），那么你可以省去负边距，只需使用。

transform：translate（-50％，-50％）;

这将根据图像的OWN尺寸调整图像的最终位置， / p>

I have a div, which acts as a page, and it only has a gif. Though the gif appears at the upper left corner of the page. I want to make it appear in the middle of the page. Below you can find my HTML and CSS that I tried, but it doesn't seem to be working.

<div id="correctGIF" data-role="page" data-add-back-btn="false"> <img src="images/correct.gif"> </div> .correctGIF > img { position: absolute; left: 50%; top: 50%; }

解决方案

Assuming that your div is the size of the page and has position:relative then

#correctGIF > img { position: absolute; left: 50%; top: 50%; display:block; }

will get you most of the way.

However, what it does is put the top/left corner of the image at the 50% position and so it is not exactly centered.

If you know the size of the image you can adjust it with negative margins like so

margin-top: - [Insert 50% of image height] px; margin-left: - [Insert 50% of image width] px;

So, for instance

margin-top: -100px; margin-left: -100px;

for a 200x200 image.

If you do NOT know the size of the image (perhaps you'll be changing it often) then you can dispense with the negative margins and just use.

transform: translate(-50%, -50%);