Html 为什么我的CSS下拉列表不居中_Html_Css_Web

Html 为什么我的CSS下拉列表不居中

html css web

Html 为什么我的CSS下拉列表不居中,html,css,web,Html,Css,Web,我的CSS下拉菜单没有居中！谁能告诉我为什么？这是我的index.html页面的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <link rel="stylesheet" typ

我的CSS下拉菜单没有居中！谁能告诉我为什么？这是我的

index.html

页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <meta charset="UTF-8">

        <title>CSS Drop Down</title>
    </head>



        <body bgcolor="white">
    <h1><center>ETst</center></h1>

<div class="menu">
 <ul>

  <li>
   <a href="#">Home</a>
  </li>

  <li>
   <a href="#">Photos</a>
  </li>

  <li>
   <a href="#">Contact</a>
   <ul>
       <li><a href="#">Item 1</a></li>
   </ul>
  </li>

 </ul>
 <p></p>
</div>
<div class="content">


<p></p>
CONTENT GOES HERE.

</div>
        </body>
</html>

我试图使用CSS将实际的菜单栏居中，但我似乎无法找到它不起作用的原因。这里有人能帮我吗？

删除位置：中间。此外，您还需要将以下内容添加到.ul菜单

display:inline-block; 
margin-left:auto;
margin-right:auto;

这是一张展示它的照片。

JSFiddle请看。顺便说一句，“位置：中心”不存在。尝试

position:absolute

并将

position:relative

添加到父级

li

谢谢！它确实起作用了。非常感谢！非常感谢。这真的很有帮助！

display:inline-block; 
margin-left:auto;
margin-right:auto;