2014-12-06 218 views
-5

我想將提交按鈕放在最後一個div上,但我不能這樣做。 我嘗試了很多東西,比如margin:auto,align-left和right,以及其他人問你在這個頁面上做什麼,但這對我來說是不可能的。如何居中提交按鈕?

<!DOCTYPE html> 
<head> 
    <meta charset="UTF-8"/> 
    <title>Mi Revista</title> 
    <style> 

body { 
    background: #7f7f7f; 
} 

#container { 
    width: 800px; 
    margin: auto; 
    position: relative; 
} 

#header { 
    background: #5783a0; 
    height: 75px; 
} 

#contenido { 
    padding: 1px; 
    background-color: white; 
} 

#left { 
    float:left; 
    width: 470px; 
    background-color: pink; 
    height: 300px; 
} 

#bordei { 
    border-style: solid none; 
    border-width: 2px; 
    border-color: black white; 
    background: #efefef; 
    margin: 0px 0px 2px 10px; 
    font-weight: bold; 
} 

#borded { 
    border-style: solid none; 
    border-width: 2px; 
    border-color: black white; 
    background: #efefef; 
    margin: 0px 10px 2px 0px; 
    font-weight: bold; 
} 

#derecha { 
    float:left; 
    width: 330px; 
    background-color: yellow; 
    height: 300px; 
} 

#footer { 
    height: 50px; 
    background-color: aquamarine; 
    clear:both; 
} 

div form { 
    display:block 
} 

#acept { 
    margin:auto; 
} 


    </style> 
</head> 

<body> 
    <div id="container"> 
     <div id="header"> Mi Revista</div> 
     <div id="contenido"> texto de arriba</div> 
     <div id="left"> 
      <div id="bordei"> borde uno</div> 
      formulario izquierda 
     </div> 
     <div id="derecha"> 
      <div id="borded">borde derecha </div> 
      Formulario derecha 
      </div> 
     <div id="footer"> 
      <form id="acept"> 
       <input type="submit" name="submit" value="Aceptar"/> 
      </form> 
      </div> 
    </div> 
</body> 
</html> 

我等待你的讚美,因爲我不能做任何形式的。 Thaks

+1

[對齊按鈕到中心]的可能重複(http://stackoverflow.com/questions/9971740/aligning-a-按鈕到中心) – Sparky 2014-12-06 18:12:17

回答

1

使用#acept中的text-align:center是最簡單的方法。 您不妨使用& ltcenter & gt標籤,但不推薦使用。所以最好的辦法是改變

#acept{ 
margin:auto; 
} 

#acept{ 
margin:auto; 
text-align:center; 
} 
2

更改CSS略如下

#acept { 
    width:20px; 
    margin:0 auto; 
} 

的問題是,你wasnt指定寬度的形式和原因在於它採取100%width.And因此margin:0 auto不起作用。

我已經做了fiddle。請檢查一下..

2

只要給對準中心頁腳DIV

​​
+0

這是一個比在css中明確指定寬度更好的解決方案。 +1 – Aditya 2014-12-06 18:03:49