我有一个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?
发布评论