Html 如何在CSS中居中浮动元素？_Html_Css

Html 如何在CSS中居中浮动元素？

html css

Html 如何在CSS中居中浮动元素？,html,css,Html,Css,我如何将您在图中看到的浮动元素居中？我想把它从网页的左边放到中间，但要把它放在页面的顶部以下是HTML的代码： <html> <head> <title>Batch File Generator | Home</title> </head> <link href="style.css" rel="stylesheet" > <ul> <li&g

我如何将您在图中看到的浮动元素居中？我想把它从网页的左边放到中间，但要把它放在页面的顶部

以下是HTML的代码：

<html>
    <head>
        <title>Batch File Generator | Home</title>
    </head>
  <link href="style.css" rel="stylesheet" >
    <ul>
         <li><a>Home</a></li>
         <li><a>Download</a>
             <ul>
                 <li><a href="32-bit version.exe" download="download">32-bit version</a></li>
                 <li><a href="64-bit version.exe" download="download">64-bit version</a></li>
             </ul>
         </li>
         <li><a>Discussion</a>
             <ul>
                 <li><a>Community forums</li></a>
                 <li><a>Ask the developers</li></a>
             </ul>
         </li>
         <li><a>News</a></li>
    </ul>
</html>

对于HTML代码，请使用以下命令：

  <div class="wrapper">

    <div class="middle-content">
      <ul>
     <li><a>Home</a></li>
     <li><a>Download</a>
         <ul>
             <li><a href="32-bit version.exe" download="download">32-bit version</a></li>
             <li><a href="64-bit version.exe" download="download">64-bit version</a></li>
         </ul>
     </li>
     <li><a>Discussion</a>
         <ul>
             <li><a>Community forums</a></li>
             <li><a>Ask the developers</a></li>
         </ul>
     </li>
     <li><a>News</a></li>
</ul>
    </div>

  </div>

使用flexbox解决方案

*{
框大小：边框框；
}
html，
身体，
保险商实验室{
填充：0；
保证金：0；
}
导航{
宽度：100%；
背景色：暗灰色；
}
李{
列表样式：无；
填充：15px；
边框：薄实浅灰色；
位置：相对位置；
背景色：白色；
}
李>a{
显示：内联块；
文字装饰：无；
}
.主菜单{
显示器：flex；
证明内容：中心；
}
.子菜单{
显示：无；
位置：绝对位置；
左：0px；
宽度：100%；
边缘顶部：15px；
}
.主菜单li：悬停{
背景颜色：浅绿色；
}
.子菜单li：悬停{
背景颜色：浅蓝色；
}
.主菜单li:悬停>.子菜单{
显示：块；
}











新闻

当您要将其居中时，为什么要将其向左浮动？删除浮动并添加

边距：0自动谢谢。“我必须写这个，否则我不能发表评论‘因为它太短……”Dawid Zbinski没有用，因为它是一个下拉菜单，使用“空白：0自动”；白色书写是，是的，在页面顶部中间。但它是垂直对齐的，下拉效果不起作用。@ange使html和正文高度：100%
并使用display:table
和display:table cell
和垂直对齐：中间
跟随答案。你会得到解决方案。我的意思是如果下拉菜单可以出现在页面顶部的中间。您的代码从页面的顶部到中间并停留在左侧。是否要使菜单中间位于顶部？如果要创建中间菜单，必须使用这些代码。中间内容{display:table cell；vertical align:top；width:100%；}ul{margin:0px；padding:0px；list style:none；text align:center；}ul li{height:40px；background color:black；opacity:8；line height:40px；text align:center；font size:20px；display:inline block；}珐琅Haque谢谢，只要我能试试，我就告诉你结果。
  <div class="wrapper">

    <div class="middle-content">
      <ul>
     <li><a>Home</a></li>
     <li><a>Download</a>
         <ul>
             <li><a href="32-bit version.exe" download="download">32-bit version</a></li>
             <li><a href="64-bit version.exe" download="download">64-bit version</a></li>
         </ul>
     </li>
     <li><a>Discussion</a>
         <ul>
             <li><a>Community forums</a></li>
             <li><a>Ask the developers</a></li>
         </ul>
     </li>
     <li><a>News</a></li>
</ul>
    </div>

  </div>

    html{
  height: 100%;
}
body{
    background: url("background.jpg") no-repeat;
    background-size: cover;
    font-family: Arial;
    color: white;
    height: 100%;
}
.wrapper{
  display: table;
  width: 100%;
  height: 100%;
}
.middle-content{
    display: table-cell;
    vertical-align:middle;
    width: 100%;
}
ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul li {
    float: left;
    width: 200px;
    height: 40px;
    background-color: black;
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
}
ul li a {
    text-decoration: none;
    color: white;
    display: block;
}
ul li a:hover {
    background-color: green;
}
ul li ul li {
    display: none;
}
ul li:hover ul li {
    display: block;
}