Question

我在页面中动态包含html内容内容是html中的树形结构，其高度和宽度通常很大我希望在包含AJAX之后，树的根节点是可见的：包含的HTML内容居中。

UPDATE1 ：在MWE中，我只使用宽度：2000px来模仿比屏幕页面更宽的东西。要点是将这个巨大的东西放在页面中心，不要改变它的宽度（缩放可以接受但是如何？）。

UPDATE2 ：包含树的根应该是水平居中的，但其他部分也需要通过浏览器的滚动条或一些内部滚动条来使用。

样式，有哪些简单而正确的方法（没有框架，因为它们已被弃用）？

UPDATE3 ：在一个真实示例的屏幕截图下方。生成树并将其动态包含在页面底部后，对于客户端来说，它是不可见的。需要使用滚动条来查看树的根。

UPDATE4 ：请参阅一个可能的选项，其中包含的内容放置在一个窗口中，滚动条需要通过浏览器或其他功能进行缩放。

MWE： https://jsfiddle.net/kowalsky/tgkbn8wp/2/

HTML：

<body>
    <h1>Test page</h1>
    <div>
        So here comes a long text that might fill the page and wrap outomatically like this. 
        Below is a WIDETHING which is supposed to content an HTML loaded dynamically via AJAX.
        The loaded content is usually wider and is impossible to fit to the page.
        <b>What are the ways to put WIDETHING centered on the page, i.e. CENTER is in the center of the page?</b>
    </div>

    <div class="frame">
        <div class="wideThing">
            CENTER
            <div class="box">BOX1</div>
            <span class="box">BOX2</span>
            <span class="box">BOX3</span>
            <span class="box">BOX4</span>
            <div class="box">BOX5</div>
        </div>
    </div>
</body>

CSS：

.wideThing {
    width: 2000px; 
    text-align: center;
}

.frame {
    width: 100%;
    border: solid 2px black;
}

.box {
    padding: 40px 100px;
    border: solid 1px black;
    background-color: red;
}

Answer 1

我会用这个：

.wideThing {
    position: relative;
    width: 2000px; 
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

首先将左边框移动到中间位置，然后将左边框向左移动50％的宽度，从而使其水平居中。

https://jsfiddle.net/p7d2j323/1/

Answer 2

我会这样做：

.wideThing{
  width: 100%; 
  text-align: center;
}

https://jsfiddle.net/tgkbn8wp/4/

Answer 3

一种可能的解决方案是使用jQuery将水平滚动条的位置设置在树的中心。

这可以使用.scrollLeft()方法和一些计算来获得水平滚动条的新位置。

但请记住，在树加载完毕后你必须执行这个script。

这是JSFiddle。

当然，您可以使用.scrollTop()类似地设置垂直滚动条的位置。

有关jQuery网站上.scrollLeft()和.scrollTop()的更多信息。

如何在页面中包含和居中广泛的html内容？

3 个答案: