如何在CSS中將浮動元素居中？

Question

我如何居中顯示在這張照片中的float元素？ 我想將其從網頁的左側帶到中間，但將其保留在頁面的頂部？

這是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>

這是CSS的代碼：

body{
    background: url("background.jpg") no-repeat;
    background-size: cover;
    font-family: Arial;
    color: white;
}
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;
}

Answer 1

對於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>

對於CSS代碼：

    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;
}

Answer 2

Flexbox解決方案。

 * { box-sizing: border-box; } html, body, ul { padding: 0; margin: 0; } nav { width: 100%; background-color: darkgray; } li { list-style: none; padding: 15px; border: thin solid lightgray; position: relative; background-color: white; } li>a { display: inline-block; text-decoration: none; } .main-menu { display: flex; justify-content: center; } .sub-menu { display: none; position: absolute; left: 0px; width: 100%; margin-top: 15px; } .main-menu li:hover { background-color: lightgreen; } .sub-menu li:hover { background-color: lightblue; } .main-menu li:hover>.sub-menu { display: block; }

 <nav> <ul class="main-menu"> <li><a>Home</a></li> <li><a>Download</a> <ul class="sub-menu"> <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 class="sub-menu"> <li><a href="#">Community forums</a></li> <li><a href="#">Ask the developers</a></li> </ul> </li> <li><a>News</a></li> </ul> </nav>

如何在CSS中將浮動元素居中？

問題描述

2 個解決方案

解決方案1
3 2017-06-18 09:22:15

解決方案2
0 2017-06-18 09:59:00

如何在CSS中將浮動元素居中？

問題描述

2 個解決方案

解決方案1 3 2017-06-18 09:22:15

解決方案2 0 2017-06-18 09:59:00

解決方案1
3 2017-06-18 09:22:15

解決方案2
0 2017-06-18 09:59:00