Центрирование страницы

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;

Если вы хотите, чтобы li элементов в поле ul, чтобы остаться в одной строке, вы должны установить float: left; в файл css.