Back Home

Open Designs

Community. Driven.

    •  
      CommentAuthorNickyD
    • CommentTimeApr 19th 2008 edited by NickyD on the 19th April 2008 at 12:41:01 EDT
     
    I just discovered Webshots. What a great tool. Anyway, it allows me to embed a video onto my site. My question, I cannot get it to center. It always aligns to the left. Is there a way to center the video? Thanks.
    •  
      CommentAuthorNickyD
    • CommentTimeApr 19th 2008
     
    I can't figure this one out. No matter what I do, it aligns left. I am sure this is something simple that I am overlooking.
    •  
      CommentAuthorarwen54
    • CommentTimeApr 19th 2008
     
    did you try wrapping the video in it's own div and then styling the div?
    •  
      CommentAuthorNickyD
    • CommentTimeApr 19th 2008
     
    Karen, that was a suggestion that I found when I searched for a solution on Google, but to be honest, I am not skilled enough to do this yet. I have made a lot of progress here as one of the few non designers, but have no expertise this type of solution yet without messing it up.
    • CommentAuthorwfiedler
    • CommentTimeApr 20th 2008 edited by wfiedler on the 20th April 2008 at 05:01:39 EDT
     
    Hi Len,

    this is a little bit tricky and not so simple to make it work at least in IE7 and FF 2.xxx.

    Try to use this:

    <div style="margin: 0 auto; text-align: center;
    display: table; vertical-align: middle;">
    Here goes the code for embedding your video...
    </div>


    Important: margin: 0 auto;

    For FF the object needs to be displayed in a table (display: table; part of CSS2) with vertical-align: middle;. because FF can only center text with text-align: center;.

    IE7 needs text-align: center; to center the object.

    Hope it helps...

    Wolfram

    Edit:

    If you don't want to use inline style use this:

    CSS:

    .video {
    margin: 0 auto;
    text-align: center;
    display: table;
    vertical-align: middle;
    }


    (X)HTML:

    <div class="video">
    Here goes the code for embedding your video...
    </div>
    •  
      CommentAuthorNickyD
    • CommentTimeApr 20th 2008
     
    Thank you Wolfram. I will give that a try. Seems easy enough the way you explained it. Thank you.
    •  
      CommentAuthorarwen54
    • CommentTimeApr 20th 2008
     
    sorry, Len...I should have given you the code to use..but Wolfram stepped up...that's great!
    smile
    •  
      CommentAuthorNickyD
    • CommentTimeApr 20th 2008
     
    Thanks anyway Karen. No need to apologize. I appreciate the post.