CSS：水平對齊兩個內部div垂直

-1

我遇到了一個主要問題，我似乎並沒有解決。我試圖讓一個徽標（文本）和一個導航欄（文本）水平對齊，但是當它完成時，它似乎不對齊，導航欄與徽標保持同一行。CSS：水平對齊兩個內部div垂直

任何人都可以幫助我嗎？

#navbar { 
 
    width: 100%; 
 
    margin: 0px auto; 
 
} 
 
#logo { 
 
    width: 40%; 
 
    float: left; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#navbar-links { 
 
    width: 40%; 
 
    float: right; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
} 
 
#navbar-links ul { 
 
    width: 40%; 
 
    padding: 8px 0px; 
 
    margin: 0px; 
 
    float: right; 
 
} 
 
#navbar-links li { 
 
    display: inline; 
 
    padding: 0px; 
 
} 
 
#navbar-links li a:link { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 
#navbar-links li a:visited { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 
#navbar-links li a:hover { 
 
    color: #c3c3c3; 
 
    text-decoration: none; 
 
} 
 
#navbar-links li a:active { 
 
    color: #c3c3c3; 
 
    text-decoration: none; 
 
}

<div id="navbar"> 
 
    <div id="Logo"> 
 
    <h1>NUMBERS</h1> 
 
    </div> 
 
    <div id="navbar-links"> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#">Two</a> 
 
     </li> 
 
     <li><a href="#">Three</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2014-10-27 user3804594

重新放置#navbar-links前#Logo：

#navbar { 
 
    width: 100%; 
 
    margin: 0px auto; 
 
} 
 
#logo { 
 
    width: 40%; 
 
    float: left; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#navbar-links { 
 
    width: 40%; 
 
    float: right; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
} 
 
#navbar-links ul { 
 
    width: 40%; 
 
    padding: 8px 0px; 
 
    margin: 0px; 
 
    float: right; 
 
} 
 
#navbar-links li { 
 
    display: inline; 
 
    padding: 0px; 
 
} 
 
#navbar-links li a:link { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 
#navbar-links li a:visited { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 
#navbar-links li a:hover { 
 
    color: #c3c3c3; 
 
    text-decoration: none; 
 
} 
 
#navbar-links li a:active { 
 
    color: #c3c3c3; 
 
    text-decoration: none; 
 
}

<div id="navbar"> 
 
    <div id="navbar-links"> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#">Two</a> 
 
     </li> 
 
     <li><a href="#">Three</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div id="Logo"> 
 
    <h1>NUMBERS</h1> 
 
    </div> 
 
</div>

來源

2014-10-27 09:37:27

謝謝！這解決了它！ – user3804594 2014-10-27 09:44:25

這是否適用於多行文本？ – user3804594 2014-11-02 19:57:04

@ user3804594是的......確實...... – 2014-11-02 20:07:01

不要使用浮動的佈局，那麼你可以簡單地使用垂直對齊屬性。

#logo, 
#navbar-links { 
    display: inline-block; 
    margin-right: -.25em // If you are not compressing html 
    vertical-align: middle; 
    width: 50%; //adjust to taste. 
} 

#navbar-links { 
    text-align: right; 
}

來源

2014-10-27 10:20:14

你所面臨的問題是很簡單的一個...

你的HTML作爲「標誌」有ID和CSS是「標誌」。因此，由於區分大小寫，瀏覽器不會將CSS連接到HTML。

#Logo { //Its case sensitive so not "logo" 
    width: 40%; 
    float: left; 
    margin: 0px; 
    padding: 0px; 
}

您可以參考以下鏈接for the code correction

來源

2014-10-27 10:48:33

CSS：水平對齊兩個內部div垂直

回答

相關問題