Question

我有两个不同的元素，徽标和导航。徽标为48px，但导航为16px。我面临的挑战是垂直对齐它们，然后将它们与我的网页内容水平对齐。

<div class="header">
    <div class="logo">LOGO</div>
    <ul class="nav">
        <li>ABOUT</li>
        <li>CONTACT</li>
    </ul>
</div>

<div class="container">
    <div class="wrapper">
        CONTENT  
    </div>
</div>

然后在我的CSS中：

.header {
    height: 10%;
    width: 100%;

    display: table;
}

.logo {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.nav {
    list-style: none;
    margin: 0;
    padding: 0;

    display: table-cell;
    vertical-align: middle;
}

.container {
    width: 100%;
    height: 90%;
    display: table;
}

.wrapper {
    height: 100%;

    display: table-cell;
    vertical-align: middle;
}

此代码生成一个输出，其中两个都是垂直对齐的，但我不知道如何将其与容器中的内容对齐，因为容器上的margin为auto。如果有人能给我一些很棒的方向。

我的总体目标是在标题内垂直对齐徽标和导航，但是例如说我的内容宽度为590px，将徽标（水平）对齐到左边，导航到右边。

输出应该看起来像

|logo|        |nav |
|contentttttttttttt|

由于

Answer 1

http://jsfiddle.net/tqBUb/

以下代码将您的不同大小的文本垂直居中，并且水平地将这两个元素的总组合宽度完美地对齐。这是你想要的吗？无论哪种方式，这可能是一个很好的起点。标题元素的宽度可以更改为任何值，并相应地进行调整。

<强> HTML

<header>
    <div class="container">
        <div class="logo">
            <span>LOGO</span>
        </div>
        <nav class="main-nav">
            <ul>
                <li>HOME</li>
                <li>ABOUT</li>
            </ul>
        </nav>
    </div>
</header>

<强> CSS

header {
    color: #fff;
    width: 80%;
    background: blue;
}

.container {
    display: table;
    background: red;
    margin: 0 auto;
}

.logo {
    display: table-cell;
    vertical-align: middle;
}

.logo span {
    font-size: 48px;
    line-height: 1;
}

.main-nav {
    display: table-cell;
}

.main-nav ul {
    list-style-type: none;
}

.main-nav ul li {
    display: inline-block;
}

|logo|_______|nav|
|_____content____|

要在590px处实现此格式，您需要一个媒体查询断点，屏幕宽度为590或更小。然后......只需更改显示：table;在.container上显示：block;和显示：table-cell; div显示：块。然后将.logo div向左移动，并向右浮动.main-nav。

垂直对齐两个不同大小的文本元素

1 个答案: