如何將下拉菜單放置在頁面中心

Question

我正在使用下拉菜單欄，需要將其放置在webpage的中心。我正在網絡的每個頁面中調用相同的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>

參考

還有一件事，在發布SO之前，先搜索相關問題，這樣可以節省大量寶貴的時間。

快樂編碼:)

Answer 2

我建議您瀏覽以下網站： http : //css-tricks.com/

它講述了您可以使用CSS的技巧。

好了，現在您的答案是，嘗試使用margin: 0 auto;

Answer 3

這是更新的小提琴鏈接

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

這是一個解決方案。

您可以使用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 個解決方案

解決方案1
5 2013-07-01 08:45:36

解決方案2
0 2013-07-01 09:08:10

解決方案3
0 2013-07-01 09:11:02

解決方案4
0 2013-07-01 09:13:34

解決方案5
0

如何將下拉菜單放置在頁面中心

問題描述

5 個解決方案

解決方案1 5 2013-07-01 08:45:36

解決方案2 0 2013-07-01 09:08:10

解決方案3 0 2013-07-01 09:11:02

解決方案4 0 2013-07-01 09:13:34

解決方案5 0

解決方案1
5 2013-07-01 08:45:36

解決方案2
0 2013-07-01 09:08:10

解決方案3
0 2013-07-01 09:11:02

解決方案4
0 2013-07-01 09:13:34

解決方案5
0