Question

我再一次看到了我最喜欢的HTML / CSS难题，并且整个都在撕裂我的头发。所以这次我认为我把我的难题放在了SO的专家身上。这就是......

想象一下，您想在浏览器中展示幻灯片。规范很简单：

幻灯片内容应由幻灯片框架收缩包装。
幻灯片框架应在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中做到这一点有另一个想法？

感谢您的光临。

Answer 1

您可以使用display:table;margin:0 auto;横向居中，除非您需要IE的50%解决方法。

你能不能成为一个小伙伴？

你已经用Google搜索了horizontally和vertically center的方法，我接受了吗？

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

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

如何居中和调整HTML幻灯片的大小

1 个答案: