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

您需要在菜单display: inline-block而不是<li>上使用float: left，然后将text-align的{{1}}属性设置为<ul> }。这是一个例子：

＆＃13;

center

＆＃13;

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;
}

＆＃13;

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

您需要水平对齐包含它的div，所以试试这个：

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

它会起作用，祝你好运。

居中这个菜单

3 个答案: