如何使 HTML 幻灯片居中并调整大小答案

【问题标题】：How to center and size a HTML slide如何使 HTML 幻灯片居中并调整大小
【发布时间】：2010-09-14 18:20:31
【问题描述】：

我又一次遇到了我最喜欢的 HTML/CSS 难题，我的头发都掉了。所以这次我想我把我的难题交给了专家。来了……

假设您想在浏览器中展示幻灯片。规范非常简单：

幻灯片内容应由幻灯片框架收缩包装。
幻灯片框架应在浏览器视口的 x 和 y 方向居中。
幻灯片框架不得超出浏览器的视口。
如果幻灯片内容超出了幻灯片框架（此时它会展开以完全填满视口），则幻灯片框架应显示滚动条。

(4) 的一个含义是视口永远不需要滚动条。

基本上，我希望实现 { margin: auto auto; } 在我的幻灯片上。我用 HTML/CSS 来说明我的目标最接近的是：

<style>
  html, body {
    margin: 0;
    overflow: hidden;
    padding: 0;
    height: 100%;
    width: 100%;
  }

  #f0 {
    bottom: 2em;
    left: 2em;
    position: absolute;
    right: 2em;
    top: 2em;
  }

  #d0 {
    height: 100%;
  }

  #c0 {
    height: 100%;
    position: relative;
    width: 50%;
  }

  #d1 {
    height: 100%;
    position: absolute;
    right: 0;
  }

  #c1 {
    height: 100%;
    overflow: auto;
    position: relative;
    left: 50%;
  }

  #d2 {
    background: yellow;
  }

</style>

<body> 
  <div id="f0">
    <div id="d0">
      <div id="c0">
        <div id="d1">
          <div id="c1">
            <table height="100%" cellpadding=0 cellspacing=0>
              <tr><td id="td" align="Left">
  <div id="d2">
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum... Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
        Lorem ipsum...
  </div>
              </td></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

您还可以在此处找到此代码：http://jsfiddle.net/qmEYU/9/

代码使用了我所知道的几乎所有定位技巧。结果显示了一个居中的幻灯片，它将随着视口的变化而动态调整大小。如果幻灯片上的视口折叠，幻灯片将显示滚动条。

唉，这不可能是答案。尽管看起来很可爱，但问题却很多：

要将 scollbar（它实际上约束 TABLE 而不是 #d2）定位在（黄色）幻灯片旁边，我需要使用 table.width=auto。为了使现在狭窄的桌子居中，我需要依靠 50% 的技巧。这个技巧的问题在于，它隐含地将中心元素的可用总宽度减少到不超过视口的 50%。
我无法在幻灯片周围绘制边框。原因是这个“幻灯片”是海市蜃楼：幻灯片内容 (#d2) 位于位于 TABLE 中心的 TD 内。 TD不能被约束；只有 TABLE 可以。如果我在#d2 周围画一个边框，那么随着#d2 的扩展，TD 将让位并且底部边框溢出到溢出中。如果我在 #c1（滚动条所有者）周围绘制边框，那么如果幻灯片内容折叠，边框将不再出现在幻灯片周围，而是出现在 TABLE（开放空间）周围。
无论幻灯片内容如何，我都需要在幻灯片下方放置一些我一直希望显示的按钮。因为我无法将任何元素识别为幻灯片，所以我无法识别放置按钮的空间......

我用 JS 写了一个解决方案。如果 W3C 采用了 IE 的动态 CSS 理念，或者我可以对#d2 上的突变做出响应，它会运行得相当好。由于这两种解决方案都不能跨浏览器使用，我需要手动“刺激”我的脚本 - 不好。

我想我在这里发帖是为了看看是否有人对如何在 CSS 中做到这一点有其他想法？

感谢收看。

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用 display:table;margin:0 auto; 水平居中，但 IE 需要 50% 解决方法。

你能把这个弄成一个jsfiddle吗？

你已经用谷歌搜索了horizontally和vertically center，我接受了吗？

编辑：这是您要找的吗？ http://medero.org/centered-table.html

显然它必须为 IE 修复。但我想知道这是否是您需要的。

【讨论】：

如果错了，请纠正我，如果我沿着 display:table 路线走，那么 - 最好的结果 - 我最终会在与 TABLE 完全相同的位置。是的，你的方法会让我居中，但它不会再抵抗幻灯片内容的任何向下推动。
您希望我使用哪种文档类型？而且，是的，随着时间的推移，我一定尝试了互联网上已知的每一个 CSS 技巧来集中事物。正如我所说，居中并不是真正的问题——我可以通过多种方式到达那里。问题在于居中框架的动态尺寸。