I am relatively new to web development and my school has asked me to create a webpage that will host the school's webshow and I am having trouble centering the embedded video.
I tried adding an inline style margin-left: auto; margin-right: auto;
to the embed code but that is not centering it. I can change the margins manually but I want the video to be automatically centered whenever somebody visits the page.
Are auto margins not supported in embed tags?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="SDL.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
</head>
<body>
<div style="background-image:url(img/Stage-Background.png)"; margin-top:100px; margin-bottom: 100px;>
<embed
src="http://blip.tv/play/AwGUv2w"
type="application/x-shockwave-flash" width="669"
height="500" allowscriptaccess="always"
allowfullscreen="true" style="margin-left:auto; margin-right:auto;"></embed>
</div>
</body>
</html>
Working simpler example showing margin style being ignored, at least on Chrome:
/* does not center it: */
embed { margin: 0 auto; }
div, embed { border: 1px solid black; }
div { width: 100%; }
<div>
<embed src="https://cdn.sstatic.net/stackexchange/Img/se-logo.png">
</div>
On Windows Chrome that renders as:
In your embed code, try to use the following just before and just after the embed code.
<center>
<embed>
//youtube url here..
</embed>
</center>
or you could use this margin: 0 auto;