margin:auto and text-align:center are not working
Question
I'm trying to build a website. For some reason my 'margin: auto' and 'text-align: center' properties are not working. Can someone please check my code out in inspect element and tell me what's wrong?
body { font-family: sans-serif, 'Helvetica'; background-color: #f9f9f9; } .dropdown { position: relative; } .dropdown-content { display: none; position: absolute; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { display: block; } .dropdown:hover .dropdown-content { display: block; } #my_cycle_head { text-align: center; } #main_navbar { text-align: center; margin: 0 auto; margin-right: auto; margin-left: auto; width: 800px; } #main_navbar nav a { text-decoration: none; text-align: center; } #main_navbar nav { display: inline-block; text-align: center; padding-right: 20px; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Cycle - Home</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <header> <h1 id="my_cycle_head">My Cycle</h1> <navbar id="main_navbar"> <nav><a href="#">Home</a> </nav> <nav class="dropdown"> <a class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </nav> <nav><a href="faq.html">FAQ's</a> </nav> <nav><a href="about.html">About</a> </nav> </navbar> </header> </body> </html>
3 answers
solution1
4 ACCPTED 2016-03-24 13:09:17
<navbar> is not an HTML element. This would have been picked up if you had used a validator .
Unrecognised elements are put into the DOM with default styling that includes display: inline .
Auto margins and text-align have no effect on elements that are display: inline .
Use the correct HTML, use <nav> (which defaults to display: block ).
solution2
0 2016-03-24 14:13:22
I've corrected your use of navbar to nav and created a series of ul and list items within it to replace all the individual nav elements. The nav element is meant to be a section of navigation elements, not to mark off each individual navigation point (see more here: http://html5doctor.com/nav-element/ ).
I also reordered your CSS and made use of the child selector ( https://css-tricks.com/child-and-sibling-selectors/ ) to prevent the styles from the main nav rolling down to the dropdown submenu. In this example, all the text is now centered.
body { font-family: sans-serif, 'Helvetica'; background-color: #f9f9f9; } #my_cycle_head { text-align: center; } #main_navbar { text-align: center; margin: 0 auto; margin-right: auto; margin-left: auto; width: 800px; } #main_navbar > ul > li { display: inline-block; text-align: center; padding-right: 20px; } #main_navbar > ul > li > a { text-decoration: none; text-align: center; } .dropdown { position: relative; } .dropdown-content { display: none; padding:0; position: absolute; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content > li { display: block; } .dropdown:hover .dropdown-content { display: block; }
<header> <h1 id="my_cycle_head">My Cycle</h1> <nav id="main_navbar"> <ul> <li><a href="#">Home</a> </li> <li class="dropdown"> <a class="dropbtn">Dropdown</a> <ul class="dropdown-content"> <li><a href="#">Link 1</a> </li> <li><a href="#">Link 2</a> </li> <li><a href="#">Link 3</a> </li> </ul> </li> <li><a href="faq.html">FAQ's</a> </li> <li><a href="about.html">About</a> </li> </ul> </nav> </header>
solution3
-2 2016-03-24 13:14:35
Please change the navbar with a div
<body>
<header>
<h1 id="my_cycle_head">My Cycle</h1>
<div id="main_navbar">
<nav><a href="#">Home</a>
</nav>
<nav class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</nav>
<nav><a href="faq.html">FAQ's</a>
</nav>
<nav><a href="about.html">About</a>
</nav>
</div>
</header>
</body>
working example: https://jsfiddle.net/Lt0y3ba1/
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.