css - 如何对齐 margin-top；与CSS

Question

我有一个看起来像这样的网站: https://dl.dropbox.com/u/94786808/Example1.png

您会注意到标题“后期制作”正确地水平对齐，但不是垂直对齐。当我尝试使用 css 中的“margin top”命令垂直对齐它时，会发生这种情况: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;
}