Question

我编写了一个HTML文档，它使用手动值来对齐元素。我知道这是一种简单的方法，但我不知道该怎么做，#menu也不会在页面的中心对齐。

这是代码。

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background: url("img/bg_1.jpg") no-repeat;

            }
            #menu {
                padding-top: 100px;
                width: 600px;
                height: 500px;
                margin: 0 auto;
            }
            .eug {
                padding-top: 58px;
                position: absolute;
            }
            .fsi {
                padding-top: 207px;
                padding-left: 2px;
                position: absolute;
            }
            .line {
                padding-left: 362px;
                position: absolute;
            }
            .shp {
                padding-top: 20px;
                padding-left: 385px;
                position: absolute;
            }
            .inq {
                padding-top: 115px;
                padding-left: 385px;
                position: absolute;
            }
            .abt {
                padding-top: 200px;
                padding-left: 385px;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <span class="eug"><img src="img/eug_menu.png"/></span>
            <span class="fsi"><img src="img/freight_s_inc_menu.png"/></span>
            <span class="line" ><img src="img/line_menu.png"/></span>
            <span class="shp" ><img src="img/shipping_menu.png"/></span>
            <span class="inq" ><img src="img/inquire_menu.png"/></span>
            <span class="abt" ><img src="img/about_menu.png"/></span>
        </div>
    </body>
</html>

JSFiddle：link

提前谢谢！

Answer 1

检查this

<div id="menu">   
 <span class="spanLeft"> 
   <span class="eug"><img src="http://i57.tinypic.com/5khawm.jpg"/></span> 
   <span class="fsi"><img src="http://i62.tinypic.com/24m591d.jpg"/></span>
 </span>
 <span class="line" ><img src="http://i59.tinypic.com/2dm8c4p.jpg"/></span>
 <span class="spanRight">            
  <span class="shp" ><img src="http://i59.tinypic.com/wivmzq.jpg"/></span>
  <span class="inq" ><img src="http://i59.tinypic.com/2wq8zro.jpg"/></span>
  <span class="abt" ><img src="http://i61.tinypic.com/103x0l4.jpg"/></span>
 </span>
</div>

CSS

body {
      background: url("http://i59.tinypic.com/2rwm5v9.jpg") no-repeat;
            }
            #menu {
                padding-top: 100px;
                min-width: 730px;
                height: 500px;
                margin: 0 auto;
    text-align: center;
            }
            .shp , .inq, .abt, .fsi,.eug {
                display: block

            }
.spanRight, .spanLeft, .line {
   display: inline-block;
    text-align: left;
    vertical-align: middle
}
.line {
    padding: 0 10px
}

Answer 2

试一试：

#menu {
   text-align:center;   
}

Answer 3

这是jsFiddle：http://jsfiddle.net/p2FSY/5/

<强> CSS

body {
    background: url("http://i59.tinypic.com/2rwm5v9.jpg") no-repeat;
}
#menu {
    margin-left: auto;
    margin-right: auto;
    width:800px;
}
.shp, .inq, .abt, .eug, .fsi {
    display : block;
}
.line {
    padding-left:20px;
    padding-right:20px;
}
.section {
    float:left;
}

<强> HTML

<body>
    <div id="menu">
        <div class="section"> 
            <span class="eug"><img src="http://i57.tinypic.com/5khawm.jpg"/></span>
            <span class="fsi"><img src="http://i62.tinypic.com/24m591d.jpg"/></span>
        </div>
        <div class="section"> 
            <span class="line">
                <img  src="http://i59.tinypic.com/2dm8c4p.jpg" />
            </span>
        </div>
        <div class="section"> 
            <span class="shp"><img src="http://i59.tinypic.com/wivmzq.jpg"/></span>
            <span class="inq"><img src="http://i59.tinypic.com/2wq8zro.jpg"/></span>
            <span class="abt"><img src="http://i61.tinypic.com/103x0l4.jpg"/></span>
        </div>
        <br style="clear: left;" />
    </div>
</body>

如何自动定位元素？

3 个答案: