Html 垂直对齐徽标和导航栏？

到目前为止，我的页面是这样的：

我想向上移动导航栏，并用文本“

TEST

”将其垂直居中

这是我的HTML:

<div class="container">
        <h1 class="logo">SIMPLICITY</h1>
        <div class="nav-container">
        <ul id="nav">
            <li><a href="#">HOMEPAGES</a>
                <ul>
                    <li><a href="#">homepage 2</a></li>
                    <li><a href="#">homepage 3</a></li>
                    <li><a href="#">homepage 4</a></li>
                    <li><a href="#">homepage 5</a></li>
                </ul>
            </li>
            <li><a href="#">SAMPLE PAGES</a>
                <ul>
                    <li><a href="#">about us</a></li>
                    <li><a href="#">services</a></li>
                    <li><a href="#">our team</a></li>
                    <li><a href="#">faq</a></li>
                    <li><a href="#">coming soon</a></li>
                    <li><a href="#">error 404</a></li>
                    <li><a href="#">pricing tables</a></li>
                    <li><a href="#">left sidebar</a></li>
                    <li><a href="#">right sidebar</a></li>
                    <li><a href="#">both sidebar</a></li>
                    <li><a href="#">full width</a></li>
                    <li><a href="#">portfolio</a></li>
                </ul>
            </li>
            <li><a href="#">SHORTCODES</a>
                <ul>
                    <li><a href="#">accordion</a></li>
                    <li><a href="#">buttons</a></li>
                    <li><a href="#">callout</a></li>
                    <li><a href="#">columns</a></li>
                    <li><a href="#">divider</a></li>
                    <li><a href="#">list</a></li>
                    <li><a href="#">message box</a></li>
                    <li><a href="#">pricing table</a></li>
                    <li><a href="#">tab</a></li>
                    <li><a href="#">testimonials</a></li>
                    <li><a href="#">toggle</a></li>
                    <li><a href="#">twitter</a></li>
                </ul>
            </li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul><!-- nav -->
        </div>
    </div><!-- header container -->

h1{
    font-family:bebas;
    font-size:48px;
    margin:0;
}

body{
    margin:0;
    padding:0;
    background-color:red;
}

header{
    background-color:white;
    margin:0;
}

.toolbar{
    background-color:#2d2d2d;
    width:100%;
    height:35px;
}

.container{
    width:960px;
    margin:0 auto;
}

.logo{
    padding-top:15px;
    padding-bottom:20px;
    color:#2d2d2d;
}

.nav-container{
    float:right;
}

#nav{
    list-style:none;
    font-weight:300;
    font-family: 'Open Sans', sans-serif;
    margin-bottom:10px;
    float:right;
    width:100%;
    position:relative;
    z-index:5;
}

#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}

#nav a{
    display:block;
    padding:5px;
    color:#2d2d2d;
    text-decoration:none;
}

#nav a:hover{
    color:#000000;
}

#nav ul{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background:#fff;
    padding-left:10px;
    padding-top:9px;
    padding-bottom:9px;
    list-style:none;
    position:absolute;
    left:-9999px;
    /*-webkit-box-shadow: 4px 4px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    4px 4px 10px rgba(50, 50, 50, 0.75);
    box-shadow:         4px 4px 10px rgba(50, 50, 50, 0.75);*/
}

#nav ul li{
    padding-top:1px;
    padding-bottom:1px;
    float:none;
    background:#ffffff;
    font-size:15px;
    width:150px;
}

#nav ul a{
    white-space:nowrap;
}

#nav li:hover ul{
    left:0;
}

#nav li:hover a{
    /*background:#6b0c36;*/
    /*text-decoration:underline;*/
}

#nav li:hover ul a{
    text-decoration:none;
}

#nav li:hover ul li a:hover{
    background:#008ed7;
    color:#fff;
}

---

有简单的方法吗？

将徽标向左浮动。然后，在导航容器中添加适当的边距

.logo {
    float:left; /* alternatively, could use position:absolute; */
    /* other css */
}

.nav-container {
    margin-top: 12px;
    /* other css */
}

Currenty float:right定义为#nav，for.nav容器将其设置为float:left。相应地添加其他样式

---

只需在css中添加以下代码

.logo {
    float:left;
    /* other css */
}
#nav {
   margin-top:25px;
}

---

下面是一个工作示例：

margin:0 auto和
文本对齐：居中
会将其与中心对齐，如果这是你的意思，你能提供一个你想要的样子的模型吗？
.logo{position:absolute；top:0；left:0}
。。。绝对定位将管理导航栏的偏移，而无需使用浮动。这种回答非常具体。如果页眉的高度因某种原因发生变化，会发生什么情况？@avrahamcool虽然我同意这是非常具体的，但更通用的垂直对齐方法包括删除现有代码。我不认为这是一个合适的论坛，因为已经有很多关于这个主题的资源。
.logo {
    float:left;
    /* other css */
}
#nav {
   margin-top:25px;
}