css - <div> 定位显示 :table-cell

Question

我正在尝试使用标签来设置网页以分隔不同的元素:
标题/横幅和菜单。后面的内容会补充的，不过现在已经够麻烦了。

我的 div 是这样排列的:

<!-- Header showing banner and sitename -->
<div class="header">
    pagetitle
</div>

<!-- Small space for the menu -->
<div class="menu">
    <a class="menuItem" href="google.com">Google is here!</a>
    <a class="menuItem" href="somewhere.com">Work work</a>
</div>

为了正确放置它们，我使用了 CSS 样式表(我是 CSS 新手，我认为这是我的问题......)

/* Holds the style information for the header/banner */
div.header{
    /* Size of div/header */
    width:900px;
    height:200px;

    /* Header image, main content actually */
    background-image:url('../img/header.png');


    /* Font look */
    font-family:"Lucida Console","Curier New",Monospace;
    font-size:75px;
    color:#CCCCCC;
    text-align:right;

    /* Used for putting text in buttom right corner.
     * -->NOT<-- supported in IE8 and earlier.
     */
    display:table-cell;
    vertical-align:bottom;
}

/* Holds the style information for the menu */
div.menu{
    /* Size of div/menu */
    width:900px;
    height:50px;

    /* Background for the menu */
    background-image:url('../img/menu.png');

    /* Positioning of items */
    text-align:center;
    vertical-align:middle;
    /* FIXME: Causes the menu to jump up next to the header!
     * NOT VERY GOOD BEHAVIOUR!
     */
    display:table-cell;
}

现在，“display:table-cell”和“vertical-align”部分用于垂直放置文本。并且工作正常，文本在 div 中正确定位，但是当存在多个时，它们会跳到彼此旁边，这是他们不应该做的。

在我看来，我发现了 2 个非常肮脏的解决方案；将 div 与

<p></p>

要么

</br>

但我真的不认为那是方法......有没有通过CSS表解决这个问题的好方法？

对于我的问题的“现场演示”，请访问:**。标题是一个占位符，而真实的则呈现。希望您能够帮助我。

Answer 1

摆脱它display: table-cell .而是使用 line-height垂直对齐您的文本和margin: 0 auto;将您的 div-s 在页面中居中。

div.header {
    background-image: url("../img/header.png");
    color: #CCCCCC;
    font-family: "Lucida Console","Curier New",Monospace;
    font-size: 75px;
    height: 200px;
    line-height: 350px;
    margin: 0 auto;
    text-align: right;
    width: 900px;
}

div.menu {
    background-image: url("../img/menu.png");
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 900px;
}