Question

我一直试图在我的网页上水平居中，但我没有取得多大成功。我有几个其他元素使用标签居中，它们完全按照应有的方式渲染。这可能是一个简单的修复，但如果是这样的话，过去几个小时它就一直盯着我。这是我正在使用的CSS：

body {
    background-color: #B0C4DE;
     }
h1 {margin: auto;
    text-align: center;
    font-size: 200%;
}


h2 {margin: auto;
    text-align: center;
    font-size: 150%;
}

nav { 
    width: 550px; 
    margin: 0 auto; 
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }

nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 2px rgba(0,0,0,0.15);
    padding: 0 25px;
    border-radius: 35px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 15px 15px;
        color: #757575; text-decoration: none;
    }

nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 5px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
        nav ul ul li a {
            padding: 5px 3px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

table, td, th {
     border: 1px solid green;
      text-align: center;
    padding: 1px;
}

th {
     background-color: green;
     color: white;
 }
table
{ 
margin-left: auto;
margin-right: auto;
}


iframe {display: block; /*new*/
        margin: auto;
        border: none; /*revised*/
        width: 800px;
        height: 200px;}

div.center p {text-align: center;
} /*new*/

 <!DOCTYPE HTML>
<html lang = "en">
  <head>
    <link rel="stylesheet" type="text/css" href="mystylesheet.css">
    <title>Tech Order Department.html</title>
    <meta charset = "UTF-8" />


<style>

div {
    text-align: justify;
    }


.section {
     margin-left: auto;
     margin-right: auto;
     width: 60%;
    }
</style>

</head>

<body>

    <h1>Logistics</h1>
<br>
    <h2>Tech Order Department</h2>

<div class="center">

<nav id=wrap>

<nav>
    <ul>
        <li><a href="http://www.oldgamer60.com/Project/Home.php">Home</a></li>
        <li><a href="http://www.oldgamer60.com/Project/Staff.php">Our Staff</li></a></li>
        <li><a href="http://www.oldgamer60.com/Project/Projects.php">Projects</a></li>              

    </ul>
</nav>
</nav>

</div>
<br>

<div>

<div class="section">
<p>YAI has been extensively involved in the writing of technical manuals, provisioning and Modification Work Orders (MWOs) for all type of military aviation and ground systems. YAI logistic services have included development and assessment of logistical requirements, preparation of integrated logistic products and field service support  for military aviation, missile and ground combat systems.</>

<p>YAI's Logistic Capabilities include:</p>

<ul>

<li>Technical Manual Writing</li>

<li>Technical Manual Change Pages</li>

<li>Manual Illustrating</li>

<li>MWO Writing</li>

<li>Tagging of Data for Use in Electronic Manuals</li>

<li>Provisioning</li>

<li>Logistical Analyses and Assessments</li>

</ul>

</div>

</div>

</body>

</html>

Answer 1

将nav标记插入具有特定类的容器div中。

<div class="container">
    <nav> .......</nav>
</div>

然后为该类插入一个css规则（margin：auto）。

.container {
  margin:auto;  
}

对不起我的英语：）

Answer 2

<nav> 水平居中，它是<ul>内<nav>的{{1}}。

这似乎来自：

nav ul {
    ...
    display: inline-table;
}

相反，除了将nav ul指定为width的值之外，为auto元素指定margin-left并将其声明为块级（而不是内联）和margin-right：

nav ul {
display: block;
margin: 18px auto;
width: 235px;
}

将<nav>标签水平居中放置在网页上

2 个答案: