CSS - 將我的導航欄視為水平
[英]CSS - putting my nav bar horizontaly
問題描述
我是css / html的新手，我正在嘗試為自己創建一個portofolio網站。
我想在我的頁面中將nav_bar水平居中放在我的圖像下，但我似乎無法使其工作。
如您所見，nav_bar當前垂直對齊。
這是我的代碼：
.index_navigation li { overflow: hidden; text-align: center; float: center; padding-right: 20px; } .index_navigation a { font-family: arial; color: black; text-align: center; padding: 14 px 16 px; text-decoration: none; } .center { width: 50%; text-align: center; display: block; background-color: transparent; margin-left: auto; border: 1px solid transparent; margin-right: auto; margin-bottom: 1px; float: center; }
<div class="background_logo"> <img src="img/logo_size.jpg" alt="Background Logo" class="center"> <nav class="index_navigation"> <ul> <li><a href="contact.html">Contact</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </div>
希望有人可以幫助我:)
提前致謝
5 個解決方案
解決方案1
3 已采納 2018-06-17 09:51:12
使用display:flex; 到ul並justify-content: center; 以中心為中心
.index_navigation ul{ display:flex; justify-content: center; } .index_navigation li{ overflow: hidden; text-align: center; float: center; padding-right: 20px; } .index_navigation a { font-family: arial; color:black; text-align: center; padding: 14px 16px; text-decoration: none; } .center{ width:50%; text-align:center; display:block; background-color: transparent; margin-left:auto; border: 1px solid transparent; margin-right: auto ; margin-bottom: 1px; float:center; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Xander Feliers - Portfolio</title> <meta name="description" content="Portfolio - Xander Feliers"> <link rel="stylesheet" href="css/screen.css"> </head> <body> <div class ="background_logo"> <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Background Logo" class ="center" > <nav class="index_navigation"> <ul> <li><a href="contact.html">Contact</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </div> </body> </html>
解決方案2
0 2018-06-17 09:51:24
將li顯示樣式設置為inline-block s並將text-align：center應用於其父級。
.index_navigation{ text-align:center; } .index_navigation li{ overflow: hidden; text-align: center; padding-right: 20px; display:inline-block; } .index_navigation a { font-family: arial; color:black; text-align: center; padding: 14 px 16 px; text-decoration: none; } .center{ width:50%; text-align:center; display:block; background-color: transparent; margin-left:auto; border: 1px solid transparent; margin-right: auto ; margin-bottom: 1px; float:center; }
<div class ="background_logo"> <img src="img/logo_size.jpg" alt="Background Logo" class ="center" > <nav class="index_navigation"> <ul> <li><a href="contact.html">Contact</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </div>
解決方案3
0 2018-06-17 09:54:51
您可以使用<table>重構菜單。 更換<ul>與<tr> ＆替換<li>與<td> 。
解決方案4
0 2018-06-17 10:53:33
我這樣做：
.background_logo NAV {
float: right;
position: relative;
left: -50%;
}
.index_navigation {
position: relative;
left: 50%;
}
.clearfix {
clear: both;
}
然后添加正確的clearfix DIV：
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<div class="clearfix"/> <!-- added clearfix -->
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<div class="clearfix"/> <!-- added clearfix -->
解決方案5
0 2018-06-17 12:42:02
我只是做了li顯示：inline-block和ul for text-align：center。
ul { text-align: center } .index_navigation li { overflow: hidden; text-align: center; float: center; padding-right: 20px; display: inline-block; } .index_navigation a { font-family: arial; color: black; text-align: center; padding: 14 px 16 px; text-decoration: none; } .center { width: 50%; text-align: center; display: block; background-color: transparent; margin-left: auto; border: 1px solid transparent; margin-right: auto; margin-bottom: 1px; float: center; }
<div class="background_logo"> <img src="img/logo_size.jpg" alt="Background Logo" class="center"> <nav class="index_navigation"> <ul> <li><a href="contact.html">Contact</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </div>
將圖像放在導航欄引導程序和 css 下方，而不會被文本重疊
[英]Putting an image below the nav bar bootstrap and css WITHOUT it being overlapped by text
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.