Как включить и центрировать широкий html-контент на странице?

Я динамически включаю содержимое html на странице.
Содержимое - это древовидная структура в html, которая обычно огромна по высоте и ширине.
Я хочу, чтобы после включения с AJAX был виден корневой узел дерева: включенное содержимое HTML сосредоточено.Как включить и центрировать широкий html-контент на странице?

UPDATE1: В MWE я просто использую ширину: 2000 пикселей, чтобы имитировать нечто большее, чем экранная страница. Дело в том, что сосредоточить эту огромную вещь на странице, чтобы не менять ее ширину (масштабирование может быть приемлемым, но как?).

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

источник

2016-10-24 Fibo Kowalsky

Я не понимаю ваш вопрос, не хотите ли вы установить ширину '.wideThing' шириной: 100%; ' –

Тогда включенный широкий контент будет выходить из страницы и в любом случае не будет центрирован. Таким образом, это не решение широкого контента. –

Можно ли использовать jQuery ?! – 5aledmaged

Я хотел бы использовать это:

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

, что сначала перемещает левую границу к центру, чем перемещает его обратно, оставленный на 50% от своей собственной ширины, таким образом, центрирование его в горизонтальном направлении.

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

источник

2016-10-24 12:17:38 Johannes

Это означает, что левая часть дерева (в данном случае часть окна) скрыта для клиента. Это так? Я хочу, чтобы включенное дерево можно было увидеть, например, используя полосы прокрутки. –

Я бы просто сделать это:

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

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

источник

2016-10-24 12:39:49 Grey

.wideThing - это всего лишь класс для имитации чего-то широкого для MWE. Приведя пример реального дерева, MEW будет сложнее. Так что изменение .wideThing - это не решение, но разместить его с центром в центре страницы. –

Возможное решение заключается в использовании jQuery установить положение горизонтальной полосы прокрутки в центре дерева.

Это может быть выполнено с использованием метода .scrollLeft() и некоторых расчетов, чтобы получить новое положение горизонтальной полосы прокрутки.

Но имейте в виду, что вам придется выполнить это script после того, как дерево закончило загрузку.

Адрес JSFiddle.

И, конечно же, вы можете установить положение вертикальной полосы прокрутки, используя .scrollTop().

Подробнее о .scrollLeft() и .scrollTop() на сайте jQuery.

источник

2016-10-25 12:04:55 5aledmaged

Как включить и центрировать широкий html-контент на странице?

ответ

Смежные вопросы