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放在页面中心。

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;
}

<div>使用display定位：table-cell </div>

1 个答案: