居中比视口宽的DIV [英] Centering a DIV that is wider than the viewport

问题描述

我正在创建一个页面来显示祖先的家谱。

这个页面是动态创建的，所以我无法知道有多少代会有什么内容或内容会是什么。 >
然而这里有一个相当简单的例子： http://myrootsmap.com/so_tree2.php。

现在，它非常简单，因为它适用于任何普通的浏览器窗口（我暂时不支持移动设备）。

然而，每增加一代树的宽度就会增加一倍，所以当表格太大而不适合查看端口时，我需要获得一个良好的表示。

如果您减小浏览器窗口的大小，您将请参阅：

1. 树在需要时具有自己的水平滚动条（良好）


2. 树总是与左边对齐（坏）


3. 如果树对于视口来说太高，垂直滚动条在窗口上而不是树（也是坏的）

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

 < div id =container> 
<？php include（includes / header_index.php）; ？> 
 
< div id =wholetree> 
< form action =<？php echo $ _SERVER ['PHP_SELF']？> method =postname =add_gen> 
< input type =hiddenname =MM_insertvalue =add_gen> 
< a href =javascript：void（）onclick =document.add_gen.submit（）class =tree_button>添加另一代< / a> 
< / form> 
< form action =map.phpmethod =getname =view_map> 
< input type =hiddenname =originvalue =<？php echo $ origin_id？>> 
< a href =javascript：void（）onclick =document.view_map.submit（）class =tree_button view_button>查看地图< / a> 
< / form> 
< div class =tree> 
<？php include（$ tree）; ？> 
< / div> 
< / div> 
< / div> 
  

和CSS

  * {
 margin：0; 
 padding：0; 
} 
 #container {
 display：flex; 
最低身高：100％; 
 flex-direction：column; 
} 
 #wholetree {
 position：relative; 
 top：120px 
} 
 .tree {
 overflow：auto; 
 padding：10px 
} 
 .tree ul {
 padding：0 0 20px; 
职位：亲属; 
} 
 .tree li {
 display：inline-block; 
 white-space：nowrap; 
 vertical-align：bottom; 
 margin：0 -2px 0 -2px; 
 text-align：center; 
 list-style-type：none; 
职位：亲属; 
 padding：0 5px 20px 5px; 
 
 $ / code> 





问题：

• 我怎样才能让 div class = tree 居中于 div id = wholetree ？


• 如果溢出，我怎样才能让 div class = tree 滚动到底部？


$ b
• 我更喜欢CSS ，但如果这是唯一的方法，我会使用jQuery。

  解决方案

  最后的解决方案带有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）; 
  }）; 
    

  
  

  I am creating a page to display a family tree of ancestors.
  The page is created dynamically so I have no way of knowing how many generations there wil be or what the content will be.
  However there's a fairly simple example shown here: http://myrootsmap.com/so_tree2.php.

  As that stands, it's pretty straightforward because it fits on any normal browser window (I'm not accommodating mobile devices for the moment).
  However with every extra generation the tree doubles in width so I need to get a good presentation when the table is too big for the view port.
  If you reduce the size of your browser window you will see that:

  1. The tree has it's own horizontal scrollbar when required (good)
  2. The tree is always aligned to the left (bad)
  3. If the tree is too high for the viewport the vertical scrollbar is on the window and not the tree (also bad)

  In summary, my HTML looks like this:

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

  And the 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;
  }
  

  Questions:

  • How can I get the div class=tree to be centered in the div id=wholetree?
  • How can I get the div class=tree to scroll to the bottom if it overflows? And
  • How can I get a vertical scroll bar on it?

  I prefer CSS only, but I'll use jQuery if that's the only way.

  解决方案

  The final solution came with jQuery. I used jQuery to measure the width of the window and the width of the content of the div (using scrollWidth). Then scrolled the div to the right with scrollLeft. This way the div is centred AND the scroll bar slider is in the middle so can be slid both ways.

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

  这篇关于居中比视口宽的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！