1

我正在尝试创建要在 iphone 和 ipad 上显示的 html 文档。

这是一个简单的，但我的图像位置有一些问题，我不确定我应该使用相对位置还是绝对位置。

我想要的是页面中心的图像（屏幕顶部下方的一点点）和图像下方居中的 youtube iframe。

此代码适用于纵向但不适用于横向，因为如果页面图像将不在中心。

我还想在图像和 youtube 框架之间留出一些空间。这是我的实际代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<meta content="width=device-width;" initial-scale="1.0;" maximum-scale="2.0;" name="viewport" user-scalable="1;" />
<body bgcolor="#9fa2b5">
   <div align="center">
      <img style="position:relative; TOP:15px; LEFT:65px; "src="http://mysite.jpg" alt="image is missing"  width=90 height=130>
      <p>
      </p>

      <iframe  width="320" height="180" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
   </div>
</body>
</html>
4

1 回答 1

1

有几种不同的技术可以使页面内容居中，其中一些在 w3.org 上的这篇文章中进行了讨论。您正在使用 上的align属性div，它应该可以工作。但是，在您还添加的图像标签中，left:65px;这会将图像移动65px到中心的右侧。

在纯 css 解决方案中，您应该对 html 执行以下操作。

<div class="container">
    <img class="rndImage" src="http://myimage.org" alt="image is missing"/>
    <iframe class="youtube" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>

style并在块中或附加的 CSS 样式表中添加以下 CSS 。

iframe.youtube
{
    width:320px;
    height:180px;
    display:block;
    margin:15px auto;
}

img.rndImage
{
    display:block;
    width:90px;
    height:130px;
    margin:15px auto;
}

div.container
{
   position:relative;
   width:100%;
   margin:5px, auto;
}

上面的代码将样式从 html 中分离出来，并使用类将其链接起来。您可以在 JsFiddle.Net 上看到一个工作示例。

于 2012-12-17T17:18:27.620 回答