如何讓這些元素保持居中

Question

我有這些代碼塊，我想保持中心整個時間。但我不知道如何。我希望你們能幫助我。 下面是代碼

main { 
 
    width: 70%; 
 
    float: left; 
 
    clear: both; 
 
    border-right: 1px solid #331a00; 
 
} 
 
main ul { 
 
    margin-top: 1em; 
 
    margin: auto; 
 
    width: 100%; 
 
    margin: auto 
 
} 
 
.index { 
 
    float: left; 
 
    border: 3px solid #b88f61; 
 
    margin-top: 1em; 
 
    margin-right: 2em; 
 
    list-style: none; 
 
} 
 
main ul { 
 
    margin-left: 3em 
 
} 
 
.index:hover { 
 
    box-shadow: 1px 2px 3px 4px grey; 
 
    border: 3px solid #331a00; 
 
} 
 
.index a div h3 { 
 
    background-color: #331a00; 
 
    padding: .5em; 
 
    color: white; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    font-size: 100%; 
 
    text-align: center; 
 
    text-decoration: underline 
 
} 
 
.index a { 
 
    text-decoration: none; 
 
} 
 
.index a div img { 
 
    width: 150px; 
 
    height: 150px; 
 
    margin-bottom: -5px 
 
} 
 
#mobile_index { 
 
    display: none; 
 
} 
 
#medusa { 
 
    background-color: white; 
 
    ; 
 
} 
 
#intro { 
 
    width: 70%; 
 
    margin: auto; 
 
    margin-bottom: 4em; 
 
    clear: both; 
 
    font-size: 120% 
 
} 
 
#intro h4 { 
 
    text-align: center; 
 
    padding: 1em 0; 
 
    font-size: 150%; 
 
} 
 
#intro h1 a { 
 
    text-decoration: none; 
 
} 
 
#intro h1 { 
 
    text-align: center; 
 
} 
 
/*ASIDE*/ 
 

 
aside figure { 
 
    width: 100% 
 
} 
 
aside { 
 
    width: 24%; 
 
    float: right; 
 
    margin-top: 1.5em; 
 
} 
 
aside h3 { 
 
    font-family: "Times New Roman", serif; 
 
    font-size: 1.5em; 
 
    font-weight: bolder; 
 
    padding-bottom: .5em; 
 
    text-align: center; 
 
} 
 
.popular { 
 
    display: block; 
 
    background-color: #331a00; 
 
    color: white; 
 
    padding: .5em; 
 
    margin-bottom: .3em; 
 
    margin-right: .1em; 
 
    margin-left: 0; 
 
    font-weight: bold; 
 
} 
 
aside figure figcaption { 
 
    margin-bottom: 1em; 
 
    width: 100%; 
 
    background-color: #331a00; 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: .5em 0; 
 
    font-size: 1.2vw 
 
} 
 
form { 
 
    width: 100% 
 
} 
 
input[type="submit"] { 
 
    margin: auto 
 
}

<main> 
 
    <h1 id="page_title">The Compendium of Greek Mythology</h1> 
 
    <ul> 
 
     <li class="index"> 
 
     <a href="Compendium Gods.html"> 
 
      <div> 
 
       <img src="images/The Gods.jpg" alt="Gods"> 
 
       <h3>Gods</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#" alt="Heroes"> 
 
      <div> 
 
       <img src="images/The Heroes.JPG"> 
 
       <h3>Heroes</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Monsters.png" id="medusa" alt="Monsters"> 
 
       <h3>Beasts</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Titans.jpg" alt="The_Titans"> 
 
       <h3>Titans</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Titans.jpg" alt="The_Giants"> 
 
       <h3>Giants</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Gods.jpg" alt="The_Giants"> 
 
       <h3>Nymphs</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Gods.jpg" alt="The_Giants"> 
 
       <h3>Constellations</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
</main> 
 
<aside> 
 
    <div> 
 
     <form method="get" action="http://www.google.com/search"> 
 
     <h3>Search the Compendium</h3> 
 
     <input type="search" name="q" size="" maxlength="" placeholder="Google Search"> 
 
     <input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz"> 
 
     <input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br> 
 
     <input type="submit" name="search" value="Search"> 
 
     </form> 
 
    </div> 
 
    <div> 
 
     <h3>Popular</h3> 
 
     <p class="popular">Zeus</p> 
 
     <p class="popular">Poseidon</p> 
 
     <p class="popular">Hercules</p> 
 
     <p class="popular">Dragon</p> 
 
     <p class="popular">Cyclops</p> 
 
     <p class="popular">Ares</p> 
 
     <p class="popular">Kronos</p> 
 
     <p class="popular">Perseus</p> 
 
     <p class="popular">Giants</p> 
 
     <p class="popular">Gaia</p> 
 
     <p class="popular">Oranos</p> 
 
    </div> 
 
</aside> 
 

眼下，的.index列表項停留在主要元素的左側。我嘗試了各種各樣的東西，但沒有一個能解決問題，這就是我來找你們的原因。我仍然在學習這一點，所以如果我沒有很好地解釋它，請和我一起露面。

Answer 1

1. 卸下填充和餘量從<ul>，添加text-align:center;
2. 從.index卸下float:left;並添加display:inline-block;

main { 
 
    width: 70%; 
 
    float: left; 
 
    clear: both; 
 
    border-right: 1px solid #331a00; 
 
} 
 
main ul { 
 
    margin-top: 1em; 
 
    margin: auto; 
 
    width: 100%; 
 
    margin: auto; 
 
} 
 
/* Remove the float: left; from .index and add display: inline-block; */ 
 
.index { 
 
    display: inline-block; 
 
    border: 3px solid #b88f61; 
 
    margin-top: 1em; 
 
    margin-right: 2em; 
 
    list-style: none; 
 
} 
 
/* Remove padding and margin from UL, add text-align:center; */ 
 
main ul { 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    text-align: center; 
 
} 
 
.index:hover { 
 
    box-shadow: 1px 2px 3px 4px grey; 
 
    border: 3px solid #331a00; 
 
} 
 
.index a div h3 { 
 
    background-color: #331a00; 
 
    padding: .5em; 
 
    color: white; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    font-size: 100%; 
 
    text-align: center; 
 
    text-decoration: underline; 
 
} 
 
.index a { 
 
    text-decoration: none; 
 
} 
 
.index a div img { 
 
    width: 150px; 
 
    height: 150px; 
 
    margin-bottom: -5px 
 
} 
 
#mobile_index { 
 
    display: none; 
 
} 
 
#medusa { 
 
    background-color: white; /* Removed extra ; */ 
 
} 
 
#intro { \t 
 
    width: 70%; 
 
    margin: auto; 
 
    margin-bottom: 4em; 
 
    clear: both; 
 
    font-size: 120%; 
 
} 
 
#intro h4 { 
 
    text-align: center; 
 
    padding: 1em 0; 
 
    font-size: 150%; 
 
} 
 
#intro h1 a { 
 
    text-decoration: none; 
 
} 
 
#intro h1 { 
 
    text-align: center; 
 
} 
 

 

 
/*ASIDE*/ 
 
aside figure { 
 
    width: 100% 
 
} 
 
aside { 
 
    width: 24%; 
 
    float: right; 
 
    margin-top: 1.5em; \t 
 
} 
 
aside h3 { 
 
    font-family: "Times New Roman", serif; 
 
    font-size: 1.5em; 
 
    font-weight: bolder; 
 
    padding-bottom: .5em; 
 
    text-align: center; 
 
} 
 
.popular { 
 
    display: block; 
 
    background-color: #331a00; 
 
    color: white; 
 
    padding: .5em; 
 
    margin-bottom: .3em; 
 
    margin-right: .1em; 
 
    margin-left: 0; 
 
    font-weight: bold; 
 
} 
 
aside figure figcaption { 
 
    margin-bottom: 1em; 
 
    width: 100%; 
 
    background-color: #331a00; 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: .5em 0; 
 
    font-size: 1.2vw 
 
} 
 
form { 
 
    width: 100% 
 
} 
 
input[type="submit"] { 
 
    margin: auto 
 
}

<main> 
 
    <h1 id="page_title">The Compendium of Greek Mythology</h1> 
 
    <ul> 
 
     <li class="index"> 
 
     <a href="Compendium Gods.html"> 
 
      <div> 
 
       <img src="images/The Gods.jpg" alt="Gods"> 
 
       <h3>Gods</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#" alt="Heroes"> 
 
      <div> 
 
       <img src="images/The Heroes.JPG"> 
 
       <h3>Heroes</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Monsters.png" id="medusa" alt="Monsters"> 
 
       <h3>Beasts</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Titans.jpg" alt="The_Titans"> 
 
       <h3>Titans</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Titans.jpg" alt="The_Giants"> 
 
       <h3>Giants</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Gods.jpg" alt="The_Giants"> 
 
       <h3>Nymphs</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     <li class="index"> 
 
     <a href="#"> 
 
      <div> 
 
       <img src="images/The Gods.jpg" alt="The_Giants"> 
 
       <h3>Constellations</h3> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
</main> 
 
<aside> 
 
    <div> 
 
     <form method="get" action="http://www.google.com/search"> 
 
     <h3>Search the Compendium</h3> 
 
     <input type="search" name="q" size="" maxlength="" placeholder="Google Search"> 
 
     <input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz"> 
 
     <input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br> 
 
     <input type="submit" name="search" value="Search"> 
 
     </form> 
 
    </div> 
 
    <div> 
 
     <h3>Popular</h3> 
 
     <p class="popular">Zeus</p> 
 
     <p class="popular">Poseidon</p> 
 
     <p class="popular">Hercules</p> 
 
     <p class="popular">Dragon</p> 
 
     <p class="popular">Cyclops</p> 
 
     <p class="popular">Ares</p> 
 
     <p class="popular">Kronos</p> 
 
     <p class="popular">Perseus</p> 
 
     <p class="popular">Giants</p> 
 
     <p class="popular">Gaia</p> 
 
     <p class="popular">Oranos</p> 
 
    </div> 
 
</aside>