CODEWITHSUNDEEP
htmlcss
Cody Acer
Cody Acer

Reputation: 9

How to align elements in the middle of the CSS Nav bar?

I need help to align objects in the middle of my Nav bar but it goes weird I'm not good at Web designing this is my 1st week of learning but i can't find any other source to figure this out.

This is my Nav bar

enter image description here

here's my CSS codes: 

#nav{
   display: block;
   background-color: #fff;
   width:100%;
   min-width:1003px;
   max-height:50px;
   padding:0;
   margin: 0;
   position: absolute;
   top:0;
   left: 0;
   box-shadow: 0px 1px 1px #fff;
   clear: both;
}
#nav ul{
   display: inline-block;
   vertical-align: middle;
}
#nav a{
   display: inline-block;
   vertical-align: middle;
   font-family: Code2;
   text-decoration: none;
   color: #000;
   padding: 11px;
   clear: both;
}
#nav a:hover{
   color:#FF2054;
}
#nav li{
   display: inline;
}
#nav img{
   clear:both;
   height:40px;
   width:40px;
   content: "";
}
#nav h1{
   font-weight: normal;
}
.textbox {
   background:transparent url(http://i.imgur.com/gPoM6WK.jpg) no-repeat 4px 4px;
   margin:0;
   margin-top: -4px;
   max-width:250px;
   padding-left:23px;
   display: inline;
   border:2px solid #999999;
   height:28px;
   border-radius: 3pt;
   font-family: Code2;
}
</style>

and here's my HTML codes:

<div id="nav">
<ul>
<li>
<a href=""><img src="http://a.deviantart.net/avatars/e/v/evilmaysmile.jpg?1" width="50" height="50" /></a>
</li>
<li>
<form action="search.pl" method="get" style="display:inline;">
<input name="q" class="textbox" type="text" size="28" placeholder="SEARCH...">
</form>
</li>
<li>
<a href="#">BROWSE</a>
</li>
<div style="float:right;">
<li>
<a href="#">HOW IT WORKS</a>
</li>
<li>
<a href="" style="">SIGN UP</a>
</li>
<li>
<a href="">LOGIN</a>
</li>
</div>
</ul>
</div>

Thanks in advance.

Upvotes: 0

Views: 1069

Answers (5)

Ahmed Khan
Ahmed Khan

Reputation: 516

I have edited your code a little bit. Problem was coming because of the logo I have change your css little bit.

#nav{
   display: block;
   background-color: #fff;
   width:100%;
   min-width:1003px;
   max-height:50px;
   padding:0;
   margin: 0;
   position: absolute;
   top:0;
   left: 0;
   box-shadow: 0px 1px 1px #fff;
   clear: both;
}
#nav ul{

   vertical-align: middle;
}
#nav a{
   display: inline-block;
   vertical-align: middle;
   font-family: Code2;
   text-decoration: none;
   color: #000;
   padding: 11px;
   clear: both;
}
#nav a:hover{
   color:#FF2054;
}
#nav li{
   display: inline;

}



#nav img{
   clear:both;
   height:40px;
   width:40px;
   content: "";
}
#nav h1{
   font-weight: normal;
}
.textbox {
   background:transparent url(http://i.imgur.com/gPoM6WK.jpg) no-repeat 4px 4px;
   margin:0;
   margin-top: -4px;
   max-width:250px;
   padding-left:23px;
   display: inline;
   border:2px solid #999999;
   height:28px;
   border-radius: 3pt;
   font-family: Code2;
}

I have added margin-top on the div to handle the list inside it and made it inline.

<div id="nav">
<ul>
<li>
<a href=""><img src="http://a.deviantart.net/avatars/e/v/evilmaysmile.jpg?1" /></a>
</li>
<li>
<form action="search.pl" method="get" style="display:inline;">
<input name="q" class="textbox" type="text" size="28" placeholder="SEARCH...">
</form>
</li>
<li>
<a href="#">BROWSE</a>
</li>

<div style="float:right; margin-top:15px;">

<li>
<a href="#">HOW IT WORKS</a>
</li>
<li>
<a href="" style="">SIGN UP</a>
</li>
<li>
<a href="">LOGIN</a>
</li>
</ul>
</div>
</div>

Upvotes: 0

MilesStanfield
MilesStanfield

Reputation: 4639

In your case you can add text-align: center; to your #nav styling

Then do this to get rid of that extra padding on that ul element you seem to have that is causing it not to be completely centered

#nav ul:first-of-type {
  padding: 0;
}

Upvotes: 0

Rishabh Shah
Rishabh Shah

Reputation: 679

There is no need for <div style="float:right;"> Check out this fiddle

https://jsfiddle.net/xfhqtd6k/

Upvotes: 0

jono
jono

Reputation: 1842

You can add text-align:center; to the #nav ul like so:

#nav ul {
   display: inline-block;
   vertical-align: middle;
   text-align: center;
}

Upvotes: 0

HesZrave
HesZrave

Reputation: 58

Try to use text-align:center on the css

Upvotes: 1

Related Questions