team1504 — 2010-10-29T15:50:44-04:00 — #1
I made a introduction vidoe to a site i am designing and since the rest of the site is in html5, i figured why not have the video with the video tag.
In doing so, I tried to center the video tag however the margin styling tha tI applied to the div element, which contains it and a skip intro link.
Here is my code:
<meta charset="utf-8" />
<link rel="shortcut icon" href="../assets/images/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="../assets/images/favicon.ico">
<link rel="icon" type="image/png" href="../assets/images/favicon.png">
<meta name="author" content="Irfan Mir (The Irf)" />
<meta name="description" content="The Official website for The Irf: Awesomeness Personified"/>
<meta name="keywords" content="Awesome, Irfan, Mir, Irf, The irf, the-irf, awesomeness, gangsta, gangsta gangsta pimp, HTML5, php, css, elegance, best"/>
<meta name="revised" content="Last Revised, 29/10/2010" />
<title>The Irf | Welcome Video</title>
margin:0px auto 0px auto;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
<video src="introHD.mov" controls="controls" autoplay="autoplay">
Please upgrade your browser to meet the latest standards of the web
<li><a href="the-irf.com/index.php" />Skip the Intro</a></li>
What am I doing wrong and why isn't the video and the link being centered?
Thanks in Advance,
stomme_poes — 2010-10-29T15:55:51-04:00 — #2
Why did you wrap a div around the video tag?
Is this what you are using to center it?
margin:0px auto 0px auto;
That doesn't work (ever) because not only do you need the automargins, but you MUST have a width stated too. A width which is less than 100%. Right now your div is 100% wide (that's the default for static blocks), so "auto" in the margin just becomes "0".
Of course, the element must also be a block type element.
You could remove the div.
display: block; /*browsers who don't understand HTML5 need this anyway, though I dunno what HTML5 specs say about video elements... if they are blocks like divs or inlines like <object> tags?*/
margin: 0 auto;
zcorpan — 2010-10-29T17:04:36-04:00 — #3
Nitpick: no, the default is "auto", which fills up the available width. It's different to 100% which becomes clear if you set padding/border/margin.
Not strictly needed for <video> since it is a replaced element and has a width already (either the same as the video or 300px if there's no video).
An alternative way to do it is to set text-align:center on an ancestor.
team1504 — 2010-10-29T23:23:03-04:00 — #4
Thank you guys,
Stomme poes' code worked.
And thank you zcorpan for the clarifications.