How to center videos

HTML & CSS
1

I’m having issues centering the videos in my site http://goldcommoditytrading.org/ - how can I make the videos be in the center of art-PostContent (I think is the right div in this case) if possible using the divs that are already there. Thanks!

2

I couldn’t access that link - is it correct ?

3

The link works OK for me.

You just need to add text-align: center to the containing <p> element. If you can’t put it directly on that element, you could try this:

.art-PostContent p:first-child {
  text-align: center;
}
4

Yes its working for me now also.

5

Thanks Ralph and Paul the video now centers fine, but so does the tweet this button and if I put text before the video. How can I make just the video centered? Thanks

6

it seems centered to me…

7

Try this instead of Ralph’s code.


.art-PostContent object {
display:block;
margin:auto;  
}
8

Thanks Paul, that works great in Firefox, but in IE (only tested with IE9) the second video is not centered although it has the same markup as the first video, I got rid of the p tags just to make sure, why is this happening? Thanks http://www.goldcommoditytrading.org/

9

Hi,

The problem is that you have set IE to display as the second worst browser in history as you have set it to emulate IE7.


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

That’s like having a new Porsche and putting a lawn mower engine inside (or even a wind up radio).:slight_smile:

Remove the meta tag and IE9 will display OK and so will IE8.

To fix IE7 add this to the css as well.


.art-PostContent embed {
display:block;
margin:auto;  
}
10

Thanks Paul, yeah it’s a theme so I can’t take credit for the css lol :slight_smile:
That works great now, now I can start tarting it up a bit and getting rid of the space at the top in IE! Cheers!

11
Off Topic:

:lol: That reminds me of my old VW Beetle.