Video div in the centre

I have a problem with video in the centre. I couldn't make it to the centre of the div.

This is my html code.

<div id="aside">
     <div id="videoClip">
        <p> Check out my new video clip! </p>
        <p>
          <video id="video" class="video-js vjs-default-skin"
            controls preload="auto" width="400" height="300" 
                poster="my_video_poster.png" data-setup="{}">
            <source src="my_video.mp4" type='video/mp4'>
        <source src="my_video.webm" type='video/webm'>
       </video>
        </p>
     </div>
 </div>

and my css is this

#aside {
    float:left;
    width:40%;
    text-align:center;
}

#aside p {
    margin:20px 0;
}

#aside img {
    border:1px solid black;
    height:400px;
}

#videoClip {
    margin:0 auto;
}

And try to check this JSFIDDLE

I already put videoClip margin:0 auto; and still it doesn't work. And also if I put text-align:center also doesn't work.

Answers


It is inside the aside which is only 40% wide

and

#videoClip {
    margin:0 auto;
    display:block;
    float:none;
}

You have the surrounding div#aside float: left and width: 40%. This restricts the video, of course. When you make the aside full width, the video will be centered properly

#aside {
    float:left;
    width:100%;
    text-align:center;
}

See JSFiddle

Or just leaving out the width and float will work as well

#aside {
    text-align:center;
}

JSFiddle


Need Your Help

How do I Create DataTable from with multiple nested JSON Objects in C#

javascript c# arrays json

Every time i am getting a dynamic JSON data, it can be an JSON array or a simple JSON object or nested JSON objects.

why is my <body> getting this added to it? (data-feedly-processed ="yes")

php html feedly

I'm working on a completely fresh site with php on my localhost. Currently no js or css and i'm not using any php frameworks or libraries. I have never used Feedly in my life!