0

我正在处理下拉菜单栏，我需要将其放在网页的中心。我在网页的每个页面中调用相同的 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>

我将把它放在页面的中心......无论如何如何做到这一点

4

5 回答 5

5

嘿，伙计，你可以这样做

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

参考

还有一件事，在 SO 上发帖之前，搜索相关问题，这将节省您大量宝贵的时间。

快乐编码:)

于 2013-07-01T08:45:36.867 回答
0

我建议你浏览这个网站：http ://css-tricks.com/

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

好吧，现在你的答案，尝试使用margin: 0 auto;

于 2013-07-01T09:08:10.993 回答
0

这是更新的小提琴链接

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; }
于 2013-07-01T09:11:02.197 回答
0

Here is a solution.

You can achieve this with dreamweiver's solution in HTML or with these two below. You will need to remove or comment out your float: left alignments.

Override your ul#nav CSS with this:

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

or this: 

ul#nav {
    margin:auto;
    width: 200px;
}
于 2013-07-01T09:13:34.813 回答
0 
the following css can useful for you.
<div >yyyyyyyyyy</div>
div{
    margin-left:45%;
    margin-top:35%;
}
于 2013-07-01T09:17:33.057 回答