如何让这些元素保持居中

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. 删除float:left; 从.index并添加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 { 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>