All geek questions in one place

How to center my CSS menu?

The first published working code gets a response ...

Here's a simple CSS dropdown webpage

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Center menu test</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
   <link type="text/css" rel="stylesheet" href="css_menu.css">
</head>

<body>

<div class="menu">
  <ul><li><a href="home.html">Home</a></li></ul>
  <ul>
    <li><a href="home.html">Menu with items</a>
      <ul>
        <li><a href="home.html#anchor_1">one</a></li>
        <li><a href="home.html#anchor_2">two</a></li>
      </ul>
    </li>
  </ul>
</div>

<div style="clear:both;"></div> 

</body>
</html>

and here is the relevant CSS:

.menu {margin-left:auto; margin-right: auto; padding:0; margin:8px; color: #000000; width:100%; border:1px;  clear:both;} 

/*Color navigation bar normal mode*/
.menu a, 
.menu a:visited {font-family:Arial, Helvetica, sans-serif;font-style:normal;font-weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}
.menu ul {list-style-type:none;padding:0; margin:0;}
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}     
.menu ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF;  color:#000000;} 
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} 
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} 
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF;  color:#000000;} 
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}

Why is the menu not on the page?

+3
source share
4 answers

Its width 100%, so it is centered but not centered (how can you center something that occupies 100% of the width?).

This may be easier to understand by looking at this script .

Thirtydot also indicates that it margin: 8pxknocks down your previous settings margin-leftand margin-right.

Update

Here he works .

I would recommend changing the markup - each of them is separately ulconfused.

+3
source

margin:auto, .

IE , . IE, text-align:center, . , , text-align .

+1

Try it.

body{
  text-align:center;
}
.menu{
  margin: 0 auto;
  text-align:left;
  width:750px; /*change width as needed*/
}
+1
source

use display: built-in for li and margin: auto and text-align: center for Ul

.header {
    background: none repeat scroll 0 0 #231F20;
    clear: both;
    height: 20px;
}

.header ul {
    clear: both;
    height: 20px;
    margin: auto;
    text-align: center;
}

.header ul li {
    display: inline;
    list-style-type: none;
    padding: 0 20px;
}

Here the title is a div containing the ul and li menus

0
source

Source: https://habr.com/ru/post/1795137/

More articles:


All Articles