-1
我有這些代碼塊，我想保持中心整個時間。但我不知道如何。我希望你們能幫助我。 下面是代碼如何讓這些元素保持居中
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列表項停留在主要元素的左側。我嘗試了各種各樣的東西，但沒有一個能解決問題，這就是我來找你們的原因。我仍然在學習這一點，所以如果我沒有很好地解釋它，請和我一起露面。