Question

我正在创建一个显示祖先家谱的页面页面是动态创建的，因此我无法知道将会有多少代或内容是什么但是这里有一个相当简单的例子：http://myrootsmap.com/so_tree2.php。

就目前而言，它非常简单，因为它适用于任何普通的浏览器窗口（我暂时不能容纳移动设备）。
然而，每增加一代，树的宽度就会增加一倍，所以当桌子对于视口太大时，我需要得到一个很好的演示。
如果您缩小浏览器窗口的大小，您将看到：

树在需要时（好）
树始终与左侧对齐（不良）
如果树对于视口来说太高，则垂直滚动条在窗口而不是树上（也是坏的）

总之，我的HTML看起来像这样：

<div id="container">
  <?php include( "includes/header_index.php"); ?>

  <div id="wholetree">
    <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" name="add_gen">
      <input type="hidden" name="MM_insert" value="add_gen">
      <a href="javascript:void()" onclick="document.add_gen.submit()" class="tree_button">Add Another Generation</a>
    </form>
    <form action="map.php" method="get" name="view_map">
      <input type="hidden" name="origin" value="<?php echo $origin_id ?>">
      <a href="javascript:void()" onclick="document.view_map.submit()" class="tree_button view_button">View the Map</a>
    </form>
    <div class="tree">
      <?php include($tree); ?>
    </div>
  </div>
</div>

和CSS

* {
  margin: 0;
  padding: 0;
}
#container {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
#wholetree {
  position: relative;
  top: 120px
}
.tree {
  overflow: auto;
  padding: 10px
}
.tree ul {
  padding: 0 0 20px;
  position: relative;
}
.tree li {
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
  margin: 0 -2px 0 -2px;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 0 5px 20px 5px;
}

问题：

如何让div class=tree集中在div id=wholetree？
如果div class=tree溢出，我怎样才能让getKey滚动到底部？和
如何在其上显示垂直滚动条？

我只喜欢CSS，但如果这是唯一的方法，我将使用jQuery。

Answer 1

请尝试以下代码：

margin-left: auto;
margin-right: auto;
display: block;  
width: 50%;

Answer 2

您可以将想要的元素放置在相对父级的中心位置，并执行以下操作：

.tree{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

这将首先将元素向右对齐50％，然后将其平移回自己宽度的50％。

它（令人惊讶地）也非常安全。

Answer 3

最终的解决方案来自jQuery。我使用jQuery来测量窗口的宽度和div内容的宽度（使用scrollWidth）。然后使用scrollLeft将div向右滚动。这样div就居中了，滚动条滑块位于中间，因此可以双向滑动。

$(document).ready(function(){
var windowWidth = $(window).width();
var treeWidth = $('#tree').get(0).scrollWidth;
var d = $('#tree');
d.scrollLeft((treeWidth-windowWidth)/2);
});

居中比视口宽的DIV

问题：

3 个答案: