如何让这些元素保持居中

时间：2017-09-27 12:40:59

标签： html css

我有这些代码块，我希望整个时间保持中心。但我不确定如何。我希望你们能在这里帮助我。 这是代码

＆＃13;
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

现在，.index列表项目停留在主要元素的左侧。我尝试了各种各样的东西，但没有一个能够解决，这就是为什么我要来找你们。

1 个答案:

答案 0 :(得分：0)

  1. 从<ul>移除填充和边距，添加text-align:center;
  2. 从float:left;移除.index并添加display:inline-block;

    3. ＆＃13;
    ＆＃13; 
    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
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题