0

У меня есть контентский блок. 818px в ширину.

<div id="container">
  <div id="content">
    <div class="block">
      <div class="blocktop"></div>
      <div class="blockmiddle">
        <div class="blockcontent">
          Тестируем
        </div>
      </div>
      <div class="blockbottom"></div>
    </div>
  </div>
</div>

И, в css:

#container {
    width: 100%;
    overflow: hidden;
}
#content {
    padding: 0 0px 0 0;
}
.block {
 width: 818px;
 }

.blocktop {
 width: 818px;
 height: 11px;
 overflow: hidden;
 background: url("img/topcontent.png");
 background-position: center;
}

.blockbottom {
 width: 818px;
 height: 11px;
 overflow: hidden;
 margin-bottom: 0px;
 background: url("img/downcontent.png") center;
 background-position: center;
}

.blockmiddle {
 width: 818px;
 background: url("img/content.png") repeat-y center;
 background-position: center;
}

.blockcontent {
 text-align: left;
 margin: 0px 10px 0px 10px;
 margin-top: 0px;
 width: 818px;
 padding: 0px 0px;
}

Перепробовал все что знал. Блок стоит слева =(.

4 ответа 4

4

не нужно применять узконаправленные способы (а к таковым относится align="center" - потому что это уже бородатый "хак" для IE). кстати, никого не хотел обидеть. тут несколько проблем:

  1. первоочередная!!!надо понимать блочную модель, то есть надо читать. например, первый же стиль: #container {width: 100%;...}. все ходили в школу и, думаю, помнят, что % - это относительная величина. А это означает, что для вычисления количества процентов необходима величина относительно которой мы ведём отсчёт. ну вот и задайте размеры окна. я так понимаю, что Вы хотели реализовать "резиновый" макет. и я даже помню, как читал где-то, что для, чтобы получить резиновый макет - надо всего лишь заменить px на % в определении ширины и высоты. это НЕ ТАК! смысл тут прост: сначала мы задаём размеры окна, для которого свёрстана страница, а потом уже указываем сколько процентов занимают блоки от этого окна.
  2. вторая же проблема является следствием первой - неправильное понимание блочной модели. для центрирования элемента достаточно написать margin: 0 auto. что это правило означает? этим мы задаём поля. как известно, существует 4 правила для задания полей и присвоение значений из краткой формы проходит по часовой стрелке - поле сверху, поле справа, поле снизу, поле слева. следовательно, элемент центрируется относительно родительского за счёт присвоения одинаковых значений для левого и правого полей. но у Вас ширина родительского и дочернего элемента равны 100%, то есть дочерний элемент занимает полную ширину родительского элемента. а что такое ширина элемента?это сумма величин подложки (padding), ширины (width), полей (margin), ширины рамок (border) слева и справа. получаем, чтобы у нас появилось пространство для полей, на основании которых элемент будет центрирован, надо уменьшить ширину центрируемого элемента (например на 80% от родительского).

вот и всё. длинновато получилось, конечно. чтобы было понятнее.

3

Так, для начала лучше было бы написать какой именно блок нужно выровнять. Как я понял из контекста это блок с классом block. Для блока с фиксированной шириной есть отличное решение: .block { left:50%; position: relative; margin-left: -409px; width: 818px; } Этот стиль рабочий. Советую Вам пользоваться гуглом перед тем как задать вопрос, потому как такая вещь довольно тривиальна и, что самое главное, ответ на неё находится в топе по запросу: "выравнивание div по центру экрана".

3

Самое распространённое:

.someBlock{
    margin: 0 auto;
}
0

Попробуйте:

<div id="container" align="center">

Работает)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.