居中這個菜單

Question

我試圖將這個菜單居中放置，但是我有點麻煩。我已經嘗試了幾種方法，但我猜想某處存在衝突。我確信有一個簡單的解決方案，但我無法弄清楚。

謝謝！

<div class="wrapper"> 
    <!-- Top main div --> 
    <div class="top"> 
     <ul> 
     <li><a href="home.html"><img src="images/home2.png" class="menu" width="218" height="50" ></a></li> 
     <li><a href="ps.html"><img src="images/ps2.png" class="menu" width="218" height="50" ></a></li> 
     <li><a href="ae.html"><img src="images/ae2.png" class="menu" width="218" height="50" ></a></li> 
     <li><a href="contact.html"><img src="images/contact.png" class="menu" width="218" height="50" ></a></li> 
     </ul> 
    </div> 

    <!-- Middle main div --> 
    <div class="middle"> 

    </div> 

    <!-- Bottom main div --> 
    <div class="bottom"> 

    </div> 
</div> 

CSS：

html, body 
{ 
    margin:0; 
    padding:0; 
    height: 100%; 
} 

ul 
{ 
    margin: 0; 
} 

li { 
    display: inline; 
    float: left; 
} 

img.menu { 
    margin-top: 25px; 
    margin-left: 35px; 
    padding: 0; 
} 

img.center { 
    position: absolute; 
    top: 0; bottom:0; left: 0; right:0; 
    margin: auto; 
} 

div.wrapper 
{ 
    min-height:100%; 
    min-width: 1280px; 
    position:relative; 
} 

div.top 
{ 
    height:100px; 
    background-color:grey; 
    background-repeat: repeat-x; 
    background: url('top.png'); 
} 

div.middle 
{ 
    background-color:blue; 
    background-repeat: repeat; 
    background: url(bg_middle.png); 
    height: 100%; 
    width: 100%; 
} 

div.bottom 
{ 
    height:78px; 
    width: 100%; 
    background-color:white; 
    background-repeat: repeat-x; 
    background: url(bottom.png); 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

Answer 1

您需要將您的菜單<li>而不是float: left上使用display: inline-block，然後你<ul>的text-align屬性設置爲center。這裏有一個例子：

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
img.menu { 
 
    padding: 0; 
 
    margin-top: 25px; 
 
    margin-left: 35px; 
 
} 
 
li:first-child img.menu { 
 
    margin-left: 0px; 
 
} 
 
img.center { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
} 
 
div.wrapper { 
 
    min-height: 100%; 
 
    min-width: 1280px; 
 
    position: relative; 
 
} 
 
div.top { 
 
    height: 100px; 
 
    background-color: grey; 
 
    background-repeat: repeat-x; 
 
    background: url('top.png'); 
 
} 
 
div.middle { 
 
    background-color: blue; 
 
    background-repeat: repeat; 
 
    background: url(bg_middle.png); 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
div.bottom { 
 
    height: 78px; 
 
    width: 100%; 
 
    background-color: white; 
 
    background-repeat: repeat-x; 
 
    background: url(bottom.png); 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div class="wrapper"> 
 
    <!-- Top main div --> 
 
    <div class="top"> 
 
    <ul> 
 
     <li> 
 
     <a href="home.html"> 
 
      <img src="images/home2.png" class="menu" width="218" height="50"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="ps.html"> 
 
      <img src="images/ps2.png" class="menu" width="218" height="50"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="ae.html"> 
 
      <img src="images/ae2.png" class="menu" width="218" height="50"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="contact.html"> 
 
      <img src="images/contact.png" class="menu" width="218" height="50"> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <!-- Middle main div --> 
 
    <div class="middle"> 
 

 
    </div> 
 

 
    <!-- Bottom main div --> 
 
    <div class="bottom"> 
 

 
    </div> 
 
</div>

Answer 2

你想在你的代碼做什麼，我聽不懂，但我張貼一些方法來中心一個div水平

的HTML代碼：

<div class="center"></div> 
<div class="center2"></div> 
<div class="center3"></div> 

css代碼：

.center{ 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
    width:200px; 
    height:200px; 
    background-color:#ddd; 
} 

.center2{ 
    margin-top:15px; 
    left:clear; 
    left:50%; 
    margin-left:-100px; 
    display:block; 
    width:200px; 
    height:200px; 
    background-color:#d88; 
    position:relative; 
} 

.center3{ 
    margin-top:15px; 
    float:left; 
    margin-left:35%; 
    width:30%; 
    position:relative; 
    background-color:#88d; 
    height:200px; 
} 

你可以看到的jsfiddle這段代碼：http://jsfiddle.net/alexfqc/xmx9r45u/

Answer 3

你需要需要中心包含它horizo​​ntaly股利，所以試試這個：

#top { 
    margin: 0 auto; 
    //put some other properties as you need.. 
    } 

它將工作，好運。