Может ли содержимое оставаться в центре при изменении размера экрана?

Question

Во-первых, вот мой грубый пример: http://demindu.com/sandbox/simple.html

Что я пытаюсь сделать:

Создание div для содержимого: скажем, 400 пикселей в высоту и 700 пикселей в ширину, как в примере,Поле контента имеет отступ 50 пикселей в каждом направлении.Div содержимого всегда должен центрироваться как вертикально, так и горизонтально, независимо от разрешения экрана.Черный фон должен простираться от центрированной области содержимого до правой части экрана, но не слева.

Единственный способ, которым я могу подумать, возможно это сделать с помощью window.innerWidth &window.innerHeight в JavaScript, но я не знаю достаточно, чтобы знать, возможно ли это вообще.

Количество пустого пространства над и под средней секцией должно быть: window.innerHeight - высота div (в этом примере: 500px [поле 400px с двумя полями 50px]) / 2

Пустое пространство слева от черной полосы должно быть: window.innerWidth - ширина div (в этом примере: 800px [700px box с двумя полями 50px]) / 2

MyВопрос к вам: Возможно ли это в JavaScript?Возможно ли это как-то с чистым CSS?

Answer 1

Вы можете сделать это полностью в CSS с 4-точечным абсолютным позиционированием. Вам понадобятся два элемента:

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

2. Второй элемент вложен в первый. Этот элемент имеет фиксированную ширину, чтобы содержимое оставалось на выбранной вами ширине. Мы также можем установить высоту и отступ для этого объекта, и родительский объект унаследует его высоту. Не используйте поля для имитации заполнения - это может вызвать проблемы с кросс-браузером, когда вы просто пытаетесь сделать некоторые трюки позиционирования, как мы здесь.

Итак, ваш HTML-код будет выглядеть примерно так:

    <div id="my_centered_design">
        <div id="my_centered_design_content">
            <p>This is just some example text.</p>
        </div>
    </div>

И ваш CSS будет выглядеть так:

    div#my_centered_design {
      background: #000;
      margin-left: -400px;
      margin-top: -250px;
      left: 50%;
      position: absolute;
      right: 0;
      top: 50%;
   }

   div#my_centered_design_content {
      background: #333;
      height: 400px;
      /* I think you actually want padding for 
         the effect you're trying to accomplish */
      padding: 50px;
      width: 700px;
   }

По сути, это тот же трюк, что и в Joe2Tutorial, за исключением того, что мы применяем дополнительные правила позиционирования, чтобы привязать центрированный элемент к правой стороне экрана.

Answer 2

Очень быстрый Google привел к этому куску кода.

этот код не выравнивает div в середине. то, что вы на самом деле для своего собственного сайта, это то, что вы поставили следующий div css

.main { ширина: 140 пикселей, цвет фона: # 252525; float: left; margin-top: 25px; }

внутри таблицы, которая выровнена по центру. Итак, в основном вы используете функцию центрирования таблицы для центрирования вашего левого плавающего элемента div просто как содержимого. вы ничего не делаете через div или css в этом отношении. фрагмент кода css, который вы предложили, не имеет ничего общего с центрированием div по центру.

Answer 3

Я думаю, это чистое решение CSS подойдет вам лучше всего: http://www.joe2torials.com/view_tutorial.php?view=37