SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to center videos

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I couldn't access that link - is it correct ?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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:

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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The link works OK for me.
    Yes its working for me now also.

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Member KeithKarr's Avatar
    Join Date
    Aug 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it seems centered to me...

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Try this instead of Ralph's code.

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

  8. #8
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <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).

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

    To fix IE7 add this to the css as well.

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

  10. #10
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, yeah it's a theme so I can't take credit for the css lol
    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. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    That's like having a new Porsche and putting a lawn mower engine inside
    That reminds me of my old VW Beetle.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •