Question

关于如何将文本放在导航栏上，就像它只向左移动一样，我感到有点难过。我已经尝试过中心对齐，但它仍然继续坚持到一边。如果有人能告诉我我犯了什么错误，我将不胜感激。

HTML：

<body>
<div id="wrap">
</div>
   <ul id="nav">
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Products</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Login</a></li>
</ul>
<div id="content">
</div>
</body>

CSS：

body {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color:#425eb4;
}
*{
    margin: 0 auto 0 auto;
}

#wrap {
    height:150px;
    background:url(images/header1.png) no-repeat center;
    text-align:center;
    background-color:#FFF;
}

#nav {
    width: 100%;
    float: left;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; }
#nav li {
    float: left;
    text-align:center; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    text-align:center;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li a:hover {
    color: #c00;
    text-align:center;
    background-color: #fff;}
    /* End navigation bar styling. */

#content {
    padding: 0 50px 50px;
    width:1000px;
    height:800px;
    background-color:#FFF;
}

Answer 1

您需要关闭float:left和#nav元素的li。然后将display:inline-block;添加到两者。接下来将text-align:center添加到#nav。

 #nav {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; 
    margin-left: 0px;  // looks like bootstrap is putting a left margin on your #nav you may want it off.

}
#nav li {
   display: inline-block;
   text-align:center; 
}

Answer 2

使用此CSS：

关闭花车，使用display:inline-block将li放在彼此旁边，并在#nav上使用text-align：center。这是你在找什么？

body {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #425eb4;
}

* {
    margin: 0 auto;
}

#wrap {
    height: 150px;
    background: url(images/header1.png) no-repeat center;
    text-align: center;
    background-color: #FFF;
}

#nav {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

#nav li {
    display: inline-block;
    text-align: center;
}

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    color: #069;
    border-right: 1px solid #ccc;
}

#nav li a:hover {
    color: #c00;
    text-align: center;
    background-color: #fff;
}

/* End navigation bar styling. */
#content {
    padding: 0 50px 50px;
    width: 1000px;
    height: 800px;
    background-color: #FFF;
}

Answer 3

IMO会将您的CSS调整为一般情况（我省略了特定于您的代码的值，并且通常包含一般必要的值以用于您的总体目标）：

#wrap {
    width:100%;
}

#nav {
    width:300px; //however wide your nav container needs
    margin:auto; //this is what will center an elem, relative to its parent (in 
                 //this case a 100% wide wrap; the 100% is relevant because it 
                 //keeps things centered as window is resized.
}

Answer 4

所有好的输入，我认为这也会对某人有所帮助,,,
我经常使用这样的东西，它是平衡/居中/和阻止所以所有都是可点击的

SELECT  AE.* ,
        EL2.SUPERVISOR_NAME as LVL2_Supervisor,
        EL3.SUPERVISOR_NAME as LVL3_Supervisor,
        EL4.SUPERVISOR_NAME as LVL4_Supervisor
FROM    “EMPL”.EMP_MGR_HOD as AE LEFT OUTER JOIN “EMPL”.EMP_MGR_HOD EL2
ON      (AE. Supervisor_id = EL2.”EMPL”ID) LEFT OUTER JOIN “EMPL”.EMP_MGR_HOD EL3
ON      (EL2.Supervisor_id = EL3.”EMPL”ID) LEFT OUTER JOIN “EMPL”.EMP_MGR_HOD EL4
ON      (EL3.Supervisor_id = EL4.”EMPL”ID);
/* In the above code Employee is L0 , Immediate Supervisor is L1 which are directly above from input table EMP_MGR_HOD table */

如何在CSS的网站导航栏中居中对齐文本？

4 个答案: