如何在jQuery中的div页面的中间显示一个gif？ [英] How to display a gif in the middle of a div page in jQuery?

问题描述

我有一个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%);

This adjusts the final position of the image based on its OWN dimensions regardless of what they might be.

这篇关于如何在jQuery中的div页面的中间显示一个gif？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！