居中页面

Question

我在尝试将页面上的所有内容居中时遇到问题。我知道我已经在页面上从顶部向下和从左侧放置了某些项目，是否有任何可能的方法仍然可以将这些设置居中。如果我取消菜单框的顶部和左侧选项，它们似乎会在页面中心垂直亮起，但我需要它们保持水平。

HTML：

<div class="container">

<div class="social1">
<a href="https://www.facebook.com/pages/Scottish-Game-Jam/136412446403315"><img         src="images/faccebook.jpg" width="32" height="32" alt="image" ></a>
</div>

<div class="social2">
<a href="https://twitter.com/ScottishGameJam"><img src="images/Twitter.jpg" width="32" height="32" alt="image"> </a></div>



<div class="logo">
<img  src="Untitled-2.png" alt="Logo" width="120"px" length="120px" ></div>


<div class="container2">

<div id="demo">
<nav>
  <ul>
    <li><a href="GameJamHomepage.html"><span>Home</span></a></li>
    <li><a href="Registration.html"><span>Register</span></a></li>
    <li><a href="Gallery.html"><span>Gallery</span></a></li>
    <li><a href="Location.html"><span>Location</span></a></li>
  </ul>
</nav>
</div>




<div id="demo2">
<nav>
   <ul>
       <li><a href="News.html"><span>News</span></a></li>
        <li><a href="Supporters.html"><span>Support</span></a></li>
        <li><a href="FAQ.html"><span>FAQ</span></a></li>
        <li><a href="ContactUs.html"><span>Contact</span></a></li>
  </ul>
</nav>
</div>

</div>



</div>

</body>

CSS：

.social1 { position:absolute;
top:5px;
left: 30px;}

.social1 a:hover {display:block;  width:32; length:32; color: #F0C;} 

.social2 { position:absolute;
top:5px;
left: 70px;}

.social2 a:hover {display:block;  width:32; length:32; color: #F0C;} 


.logo {position:absolute;
top:50px;
left:30px;}

body{
background-color: #000;
text-align: center;}

#container {position:absolute; margin:auto;
text-align:left;
width:450px;}



#container2 { position:absolute;}




#demo nav ul li a {display: block; width: 120px; height: 120px;
background-image: url(icons.png); background-repeat: no-repeat;}

#demo nav ul li:nth-child(1) a {
background-color: #5bb2fc;
position:absolute;
top:190px;
left:30px;}

#demo nav ul li:nth-child(2) a {
background-color: #58ebd3;
position:absolute;
top:190px; left:160px;}

#demo nav ul li:nth-child(3) a {
background-color: #ffa659;
position:absolute;
top:190px;
left: 290px;    }

#demo nav ul li:nth-child(4) a {
background-color: #ff7a85;
position:absolute;
top:190px;
left: 420px;    }

#demo2 nav ul li a {display: block; width: 120px; height: 120px;
        background-image: url(icons.png); background-repeat: no-repeat; }

#demo2 nav ul li:nth-child(1) a {background-color: #5bb2fc;
            position:absolute;top:320px;left:30px;}

#demo2 nav ul li:nth-child(2) a {
            background-color: #58ebd3;
            position:absolute;
top:320px;
left:160px;
        }
#demo2 nav ul li:nth-child(3) a {
            background-color: #ffa659;
            position:absolute;top:320px;left:290px;         }

#demo2 nav ul li:nth-child(4) a {background-color: #ff7a85;
            position:absolute;top:320px;left:420px; }


nav ul li a span {font: 50px "Dosis", sans-serif; text-transform: uppercase;position: fixed;                 left:600px; top: 190px;    display: none;  }

#demo nav ul li a:hover { display:block; height:120px;
width:120px;
background-color:#3333CC;}



#demo2 nav ul li a:hover { display:block; height:120px;
width:120px;background-color:#3333CC }

nav ul li a:hover span {display: block;}

nav ul li:nth-child(1) a span { color: #5bb2fc;                 }

nav ul li:nth-child(2) a span { color: #58ebd3;         }

nav ul li:nth-child(3) a span {color: #ffa659;}

nav ul li:nth-child(4) a span {
                color: #ff7a85;}

Answer 1

您可以轻松地将元素居中，您唯一需要做的就是设置margin: auto;

如果您还希望ul 中的li 元素保持在同一行，则必须在css 文件中设置float: left;。