垂直对齐徽标和导航栏？

这是我的页面的外观至今：What I have so far...垂直对齐徽标和导航栏？

我想了移动导航栏和垂直文本“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 -->

这是我的CSS：

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

有没有一种简单的方法来做到这一点？

来源

2013-08-29 BrianLender

'保证金：0汽车;'和'文本对齐：中心;'将它对准中心如果多数民众赞成你的意思 – Sir

你能提供样机你想要这样看起来像什么？ – bdesham

'.logo {position：absolute;顶部：0; left：0}'...绝对定位将管理导航栏的偏移而不诉诸浮动。 – PlantTheIdea

将徽标浮动到左侧。然后，为导航容器添加适当的边距。

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

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

See Fiddle

来源

2013-08-29 18:33:51

这很棒！谢谢！ – BrianLender

这种类型的答案非常具体。如果标题的高度因某些原因而改变，会发生什么情况？ – avrahamcool

@avrahamcool虽然我同意这是非常具体的，但更一般的垂直对齐方法涉及拆除现有的代码。我不认为这是适合的论坛，因为那里已经有很多关于这个主题的资源。 –

.logo 
{ 
    float:left; 
} 

#nav 
{ 
    padding-top: 18px; 
    float: left; 
} 
.nav-container 
{ 
    float: left; 
}

Currenty浮动：右被定义为#nav和.nav容器使其作为浮动：左侧。相应地添加其他样式。

DEMO

来源

2013-08-29 18:39:12

在你的CSS只需添加以下代码。

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

这里是工作示例：http://jsfiddle.net/GawvT/

来源

2013-08-29 18:43:09

垂直对齐徽标和导航栏？

回答

相关问题