居中嵌入内容答案

【问题标题】：Centering Embedded Content居中嵌入内容
【发布时间】：2013-04-20 06:56:43
【问题描述】：

我对网络开发比较陌生，我的学校要求我创建一个网页来托管学校的网络节目，但我无法将嵌入的视频居中。

我尝试在嵌入代码中添加内联样式margin-left: auto; margin-right: auto;，但这并没有使其居中。我可以手动更改边距，但我希望每当有人访问该页面时视频自动居中。

嵌入标签不支持自动边距吗？

<!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>

显示边距样式被忽略的更简单示例，至少在 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>

在 Windows Chrome 上呈现为：

【问题讨论】：

您需要向我们展示一些 HTML。尝试为您的视频元素 + 显示块 + 边距指定宽度：自动。
给我们你的代码示例。
投票重新打开，因为 q 看起来很清楚（或已编辑；没有检查时间线），我实际上有同样的问题（自动边距未应用于 embed 标签）。
我还添加了一个 sn-p 示例。

标签： html css embed styling

【解决方案1】：

在您的嵌入代码中，尝试在嵌入代码之前和之后使用以下内容。

<center>
   <embed>
        //youtube url here..
   </embed>
</center>

或者你可以使用这个 margin: 0 auto;

【讨论】：

这行得通，但是标签是不是有点过时了？它仍然完全支持吗？
据我所知它仍然受支持（除非有人会反驳这一点）。您也可以使用 class 来实现这一点，只需将与 div 包装起来，在 css 中您可以使用 margin:0 auto;将其居中。
现已弃用：developer.mozilla.org/en-US/docs/Web/HTML/Element/center
可能是，这就是为什么我也建议替代解决方案，如果是这种情况。无需反对。
<center> 已弃用； embed 上似乎忽略了自动边距（OP 也有这个问题）。至少，Chrome 会忽略它。