Как выровнять margin-top; с CSS

Question

У меня есть сайт, который выглядит примерно так: https://dl.dropbox.com/u/94786808/Example1.png

Вы заметите, что заголовок "Пост-продакшн" правильно выровнен по горизонтали, но не по вертикали. Когда я пытаюсь выровнять его по вертикали, используя команду "margin top" в css, это происходит: https://dl.dropbox.com/u/94786808/example2.png

Вы можете видеть, что заголовок теперь находится в правильном месте, но "ящик", содержащий его, также переместился. Вот css, участвующий:

Контейнер (чтобы держать его на месте)

.container {
     margin-left: auto;
     margin-right: auto;
     background-color:#FFF;
     width: 960px;
     height: 609px;
}

---

Пост-продакшн (поле градиента)

.postproduction {
     width: 960px;
     height: 203px;
     background-image:url(../image/departments/bg.png);
     opacity: 0.5;
     -o-transition:.2s;
     -ms-transition:.2s;
     -moz-transition:.2s;
     -webkit-transition:.2s;
}

---

и, наконец, Titlepost (физический текст)

    .TitlePost {
          margin-top: 101px;
          margin-left: 35px;
          font-family: 'NeouBold';
          font-size: 30px;

}

---

Есть идеи, почему это происходит?

Answer 1

Ваш код, вероятно, будет лучше структурирован так:

Html

<div class="container">
    <div class="postproduction">
        <p>Post Production</p>
    </div>
</div>

Css

.container {
     margin-left: auto;
     margin-right: auto;
     background-color:#FFF;
     width: 960px;
     height: 609px;
}
.postproduction {
     width: 960px;
     height: 203px;
     background-image:url(../image/departments/bg.png);
     opacity: 0.5;
     -o-transition:.2s;
     -ms-transition:.2s;
     -moz-transition:.2s;
     -webkit-transition:.2s;
}
.postproduction p{
          padding-top: 101px;
          padding-left: 35px;
          font-family: 'NeouBold';
          font-size: 30px;
}