CSS - putting my nav bar horizontaly
Question
I am a newbie to css/html and I am trying to create a portofolio website for myself.
I would like to horizontally center my nav_bar in my page just under my image but I can't seem to make it work.
As you can see, the nav_bar is currently aligned vertically.
This is my code:
.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>
Hopefully someone can help me :)
Thanks in advance
5 answers
solution1
3 ACCPTED 2018-06-17 09:51:12
Use display:flex; to ul and justify-content: center; to center it
.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>
solution2
0 2018-06-17 09:51:24
Set display style of li to inline-block s and apply text-align:center to its parent.
.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>
solution3
0 2018-06-17 09:54:51
You could restructure the menu using <table> . Replacing <ul> with <tr> & replacing <li> with <td> .
solution4
0 2018-06-17 10:53:33
I'd do it like this:
.background_logo NAV {
float: right;
position: relative;
left: -50%;
}
.index_navigation {
position: relative;
left: 50%;
}
.clearfix {
clear: both;
}
And then add the right clearfix DIVs:
<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 -->
solution5
0 2018-06-17 12:42:02
I would just made li display: inline-block and 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS Help for my Nav Bar
CSS nav bar hiding my content
Putting an image below the nav bar bootstrap and css WITHOUT it being overlapped by text
Why is my text not vertically in the middle on my CSS nav bar?
Positioning Nav Bar with CSS
CSS nav bar is unclickable
CSS align nav bar
CSS hover in a nav bar
Nav bar width/ CSS
overlapping nav bar css
Related Tags