CODEWITHSUNDEEP
css
Linards Berzins
Linards Berzins

Reputation: 83

how to align navigation horizontally and center it, with responsive CSS preferably

How to center navigation horizontally inside the div? The CSS should be responsive preferably.

HTML:

<nav id="centermenu">
    <ul>
        <li><a href="#">Business</a></li>
        <li><a href="#">Specialities</a></li>
        <li><a href="#">Contact us</a></li>
    </ul> 
</nav>

well, the css was, and changed the left: 50% to 25%, nada. hope this was enough

#centermenu {
float: left;
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
 position: relative;
}

#centermenu ul {
float: left;
clear: left;
position: relative;
list-style: none;
left: 50%;
display: block;
text-align: center;
}


#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
 }

Upvotes: 0

Views: 10061

Answers (4)

zellio
zellio

Reputation: 32484

#centermenu {
  display:block;
  width:100%;
  text-align:center;
}

#centermenu > ul {
  display:inline-block;
  text-align:left;
  overflow:auto; 
}

#centermenu > ul > li {
  float:left;
}

Upvotes: 2

Substantial
Substantial

Reputation: 6682

Make sure your browser is not rendering in quirks mode. You should have a DOCTYPE specified on the first line of the HTML file to render in standards mode:

<!DOCTYPE html>

In standards mode, this works (tested and working for me):

#centermenu {
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}

#centermenu ul {
list-style: none;
display: block;
margin: 0 auto;
text-align: center;
}


#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}

Upvotes: 3

Shadow_boi
Shadow_boi

Reputation: 2198

u need to specified the width for ul, if you use margin: 0 auto; no need float: left; or left: 50%

#centermenu ul {
margin: 2 auto;
display: block;
width: 600px;
}

or make ul display inline;

#centermenu ul {
display: inline;
}

Upvotes: 1

Motiejus Jakštys
Motiejus Jakštys

Reputation: 2979

ul {
  display: block;
  margin: 0 auto;
}

Upvotes: 1

Related Questions