如何使標題與頁面中心的導航欄對齊？
[英]How do I get my header to align with my navigation bar at the center of my page?
問題描述
我是HTML和CSS的新手。 我正在嘗試居中兩個對象-標頭圖片和導航
這是我的頭CSS
div #header-img {
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -30px;
padding: 0 0 0 0;
}
這是我的標頭html代碼
<div id="header-img">
<img src="http://metaphorcontrol.com/solewebsite/wp-content/uploads/2012/07/SoleHeaders1.jpg">
</div>
我想知道如何將其與以下html代碼中的以下項目對齊。
<div>
<nav><ul>
<li style="background-color: #99042A;"><a href="/food-wine.html">Fine Foods</a></li>
<li style="background-color: #585123;"><a href="/wine-cellar.html">Wine & Cellar</a></li>
<li style="background-color: #2E0219;"><a href="/kitchenware.html">Kitchenware</a></li>
<li style="background-color: #211103;"><a href="/our-philosophy.html">Our Philosophy</a></li>
<li style="background-color: #DBCCC5;"><a href="/register.html">Register</a>|<a href="/login.html">Log-In</a></li>
</ul></nav>
</div>
使用以下CSS
nav ul {
list-style-type: none;
overflow: visible;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -4px;
}
nav li {
float: left;
width: 204px;
height: 80px;
overflow: hidden;
white-space: nowrap;
}
我在語法上哪里出錯了，以后應該記住什么以確保我想要的所有行為都是正確的。
提前致謝！
5 個解決方案
解決方案1
0 2015-07-27 20:48:48
嘗試添加位置：相對於兩者
div #header-img {
position:relative;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -30px;
padding: 0 0 0 0;
}
解決方案2
0 2015-07-27 20:59:00
並“直接”訪問＃header-img div我想您的目的是這樣做嗎？
div#header-img { /* CSS HERE */ }
...不
div #header-img { /* CSS HERE */ }
由於您的網站可能至少被一個div包圍着，所以無論如何仍然可以工作：)但是區別是：
div＃header-img = ID為header-img的div
div＃header-img = div中有ID header-img的元素（實際上是div）...
您可以做出選擇！ :)
解決方案3
0 2015-07-27 21:07:17
解決方案4
0 已采納 2015-07-27 21:09:36
現在，您的導航器上已添加了填充，而圖像則沒有。 它將其推到上方並導致其不像圖像一樣向左對齊。
nav ul {
padding:0;
list-style-type: none;
overflow: visible;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -4px;
}
將填充物添加到頂部，它們將對齊。 您可以使用position：並創建一個具有指定寬度的外部div來包含元素，並且將邊距設置為auto，它們也應該正確地居中。
解決方案5
0 2015-07-27 21:15:31
您必須在標頭和導航中指定寬度，並針對標頭img使用display:block而不是inline-block
body{width:100%;} #wrapper{width:1024px; margin-left: auto; margin-right: auto;} nav ul { list-style-type: none; position:relative; display: inline-block; margin: 0!important; padding:0!important; } nav li { float:left; text-align:center; width: 204px; height: 80px; overflow: hidden; white-space: nowrap; } #header-img { display:block; margin-top: -30px; padding: 0 0 0 0; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="wrapper"> <div id="header-img"> <img src="http://metaphorcontrol.com/solewebsite/wp-content/uploads/2012/07/SoleHeaders1.jpg"> </div> <div> <nav><ul> <li style="background-color: #99042A;"><a href="/food-wine.html">Fine Foods</a></li> <li style="background-color: #585123;"><a href="/wine-cellar.html">Wine & Cellar</a></li> <li style="background-color: #2E0219;"><a href="/kitchenware.html">Kitchenware</a></li> <li style="background-color: #211103;"><a href="/our-philosophy.html">Our Philosophy</a></li> <li style="background-color: #DBCCC5;"><a href="/register.html">Register</a>|<a href="/login.html">Log-In</a></li> </ul></nav> </div> </div> </body> </html>
如何將導航欄居中，使其位於頁面頂部的中間？
[英]How do I center my navigation bar so it will be placed in the middle at the top of my page?
如何將頂部的容器與 Bootstrap 5 中的導航欄對齊？
[英]How do I align the container at the top with my navigation bar in Bootstrap 5?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.