Question

我正在尝试将我的菜单放在中心后，我在菜单的整个页面上更改了菜单。但是现在无论我尝试什么，它都不会将我的菜单放在页面中间。如果我尝试这样做，我的菜单将在右侧或从中心开始，但不会在我的页面中央。我也希望H1与菜单

我的html页面

    @charset "utf-8";
    html {
      font: 12pt;
      font-family: Verdana, Geneva, sans-serif;
    }
    body {
      margin: 0px;
    }
    header h1 {
      float: left;
      margin: 11px;
    }
    header {
      background-color: white;
      font: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      color: #F00;
      float: left;
      display: block;
    }
    nav {
      background-color: #F00;
      float: right;
      height: 60px;
      width: 900px;
      display: block;
      width: auto;
    }
    nav a {
      text-decoration: none;
      list-style: none;
      color: white;
      font-size: 20px;
      padding: 8px;
    }
    nav li:hover,
    a:hover {
      color: black;
    }
    li {
      display: inline;
    }
    img {
      border-color: #F00
    }
    .page {
      float: left;
    }
    .verticalline {
      border-left: thick solid #ff0000;
    }
    .head {
      height: 60px;
      background-color: #F00;
      width: 100%;
      min-width: 2000px;
    }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Lierse Liga</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="head">
    <header>
      <h1>Lierse Liga</h1>
      <nav>
        <ul class="menu">
          <li><a class="button" href="index.html">Home</a>
          </li>
          <li>
            <a class="button" href="eersteklasse.html">
              <img src="bal.gif" id="img1" />Eerste Klasse</a>
          </li>
          <li><a class="button" href="tweedeklasse.html">Tweede Klasse</a>
          </li>
          <li><a class="button" href="contact.html">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
  </div>

Answer 1

尝试并检查你的浮动div： -

DEMO

header h1{
   /*( float:left;*/
    margin: 11px;
}
header{
    background-color:white;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#F00;
    /*float:left;*/
    display:block;
}
nav{
    background-color:#F00;
   /* float:right;*/
    height:60px;
    width: 900px;
    display:block;
    width:auto;
}

Answer 2

如果我理解正确的话。请参阅下文。

试试这个

.menu{
  position:relative;
  right: 50%;
  left:50%;
}

DEMO

Answer 3

Here is the working demo with header aligned to center.

http://jsfiddle.net/silpa/fbggexzx/ 1

Here is the working demo for logo left aligned and menu center alinged

http://jsfiddle.net/silpa/fbggexzx/3/

Answer 4

CSS

@charset "utf-8";
html{
    font:12pt;
    font-family:Verdana, Geneva, sans-serif;
}
body{margin:0px;
}
header h1{
    position:absolute;
}
header{
    background-color:#F00;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#fff;
    display:block;
    position:relative;
}
nav{
    background-color:#F00;
    height:60px;
    width: 575px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
nav a{
    text-decoration:none;
    list-style:none;
    color:white;
    font-size:20px;
    padding:8px;
}
nav li:hover,a:hover{
    color:black;
}
li{
    display:inline;
}
img{
    border-color:#F00
}
.page{
    float:left;
}
.verticalline{
    border-left: thick solid #ff0000;
}
.header{
    width:100%;
}
.head{
    height:60px;
    background-color:#F00;
    width:100%;
}

试试这个

无法进入中心菜单

4 个答案: