Gif Picture Not Able To Align?

Question

Right now I am working with an iFrame for HTML and I am trying to center align this image. When I type in align = "middle" it doesn't seem to work. I wan to place this GIF in a website. Aligning it in the center would make it look nice.

<iframe src="http://gifyoutube.com/embed/mG9rRw" frameborder="0" scrolling="no" width='480' height='270' style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);" ></iframe>

Can you make it more clear if you want to center the img in the iframe, or in the entire window. — Mr Lister, Aug 04 '15 at 17:02
possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — imtheman, Aug 04 '15 at 17:06

score 0 · Accepted Answer · answered Aug 04 '15 at 17:07

0

That is not a GIF. That is a video (either MP4 or WebM (depending on your browser)) which is embedded in the iframe. It's so small and could easily be converted into a GIF, but that's not the question here.

Add this CSS to your iframe and it should align it in the middle horizontally.

display: block;
margin: 0 auto;

http://jsfiddle.net/odezpjLy/

Check out the JSFiddle above for an example.

answered Aug 04 '15 at 17:07

MortenMoulder

6,138
11
60
116

You're right, I had converted the original video through an online converter. – henleygarcia Aug 04 '15 at 17:24
@henleygarcia You should convert it to a GIF. Please mark my answer as correct if it was :) – MortenMoulder Aug 04 '15 at 17:30
I believe I marked it, I'm quite new here. Excuse my lack of knowledge around this site :p – henleygarcia Aug 04 '15 at 17:31
@henleygarcia No problem haha. Usually you upvote + mark as answered on the answered post, and if something else worked, you can upvote that as well. But only 1 answer ;) – MortenMoulder Aug 04 '15 at 17:32

score 0 · Answer 2 · answered Aug 04 '15 at 17:08

0

Place it in a div wrapper, and center the item in the <div>:

#wrapper
{
  text-align:center;
  width:100%;
}

<div id="wrapper">
<iframe src="http://gifyoutube.com/embed/mG9rRw" frameborder="0" scrolling="no" width='480' height='270' style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);" ></iframe>
</div>

answered Aug 04 '15 at 17:08

Spencer Wieczorek

21,229
7
44
54

That's a hacky way and shouldn't be used. You should avoid `width: 100%` at all cost, if you can use `margin: 0 auto` instead. Also, adding a DIV around it just complicates things more. – MortenMoulder Aug 04 '15 at 17:13

Gif Picture Not Able To Align?

2 Answers2