如何自動定位元素？

-3

我寫了一個使用手動值來對齊元素的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

預先感謝您！

來源

2014-07-12 conquistador

我認爲你的意思是你想的項目進行自動定位，而不是使用固定位置是否正確？ – rhughes

是的，我想但我不知道如何。 – conquistador

這是一個太寬泛的問題 - 停止對所有東西使用'position：absolute'，並閱讀HTML中元素流的基礎知識以及使用CSS進行佈局的教程... – CBroe

檢查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 
}

來源

2014-07-12 17:30:48 Tushar

試試：

#menu { 
    text-align:center; 
}

來源

2014-07-12 17:21:34 Rahiil

這裏的的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>

來源

2014-07-12 17:36:58

如何自動定位元素？

回答

相關問題