垂直對齊徽標和導航欄？

這是我的頁面的外觀至今：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

垂直對齊徽標和導航欄？

回答

相關問題