我无法尝试将所有内容集中在页面上。我知道我已经从页面顶部向左下方定位了某些项目,是否有任何可能的方法仍然以这些设置为中心。如果我选择顶部和左侧选项,菜单框似乎会垂直向下移动到页面中心,但我需要它们保持水平。
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;}
答案 0 :(得分:0)
您可以轻松地使元素居中,您唯一需要做的就是设置margin: auto;
如果您还希望li
中的ul
元素保持在同一行,则必须在css文件中设置float: left;
。