Question

我在下拉菜单栏上工作，我需要将它放在网页的中心。我在网页的每个页面调用相同的div。

<head>

CSS

<style>
/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav {margin: 0 0 0 200px;}
ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}
ul.drop { position: relative; z-index: 597; float: left; }
ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }
ul.drop ul li { float: none; }
ul.drop ul ul { top: -2px; left: 100%; }
ul.drop li:hover > ul { visibility: visible }
.style1 {
 font-family: calibri;
 font-size: 18px;
 font-weight: bold;
}
ul.drop {
    float:left;
     position: relative;
     z-index: 597;
  }
</style>


</head>

HTML

<body>
<p>&nbsp;</p>
<ul id="nav" class="drop">

<!--<ul id="nav" class="drop">-->
  <li><span class="style1">EMS Computation</span>
    <ul>
      <li><span class="style1"><a href="tu.php">Optimization Through DEA</a></li></span>
      <li><span class="style1"><a href="tu.php">Optimization Through GA</a></li></span>
    </ul>
     <li><span class="style1"><a href="solar.php">Solar Panels</a></li></span>
  <li><span class="style1">Run Expert System</a>  </span>
  <ul>
      <li><span class="style1"><a href="">Run The System</a></li></span>
      <li><span class="style1"><a href="#">View The Result Of Expert System</a></li></span>
    </ul>
    </li>
    <li><a href="tarrifrate.php"><span class="style1">Tarrif rate</a>  </li></span>

  <li><span class="style1">Customer Records</span>
    <ul>
      <li><span class="style1"><a href="">Status of Billing Of Customer </a></li></span>
         <li><span class="style1"><a href="">Delete Records </a></li></span>
         <li><span class="style1"><a href="">View Comments</a></li></span>
    </ul>
  </li>



  <li><span class="style1">Site</span>
    <ul>
      <li><span class="style1"><a href="#">Update</a></li></span>
      <li><span class="style1"><a href="#">View</a></li></span>
    </ul>
  </li>
</ul>


</div>
</div>

</body>
</html>

我会在页面的中心对它进行操作......无论如何做到这一点

Answer 1

嘿哥们，你可以这样做吗

<div style="width:800px; margin:0 auto;">
    centered content
</div>

REFERENCE

还有一件事，在发布SO之前，搜索相关问题，它将节省您宝贵的时间。

快乐编码：）

Answer 2

我建议您浏览本网站：http://css-tricks.com/

它讲述了你可以用CSS做的技巧。

好了，现在回答您的问题，尝试使用margin: 0 auto;

Answer 3

以下是更新的 fiddle link

ul#nav {/* margin: 0 0 0 200px;*/text-align: center;}
ul.drop { position: relative; z-index: 597; /*float: left; */}
ul.drop {
  /*float:left;*/
  position: relative;
  z-index: 597;
 }
ul.drop li { *float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; display: inline-block; }

Answer 4

Here is a solution.

您可以使用Dreamweiver的HTML解决方案或下面的这两个解决方案来实现这一目标。您需要删除或注释掉float: left路线。

使用以下内容覆盖您的ul#nav CSS：

ul#nav {
    margin:0 auto;
    width: 60%;
}

或者这个：

ul#nav {
    margin:auto;
    width: 200px;
}

Answer 5

the following css can useful for you.
<div >yyyyyyyyyy</div>
div{
    margin-left:45%;
    margin-top:35%;
}

如何在页面中心放置下拉菜单

5 个答案: