2014-12-06 3 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- button-to-the-center) – Sparky

ответ

1

Используйте метод text-align: center в #acept, это самый простой способ. Вы также можете использовать тег & ltcenter & gt, но он устарел. Так что лучше всего было бы изменить

#acept{ 
margin:auto; 
} 

в

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

Измените ваш CSS немного следующим

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

Проблема заключалась в том, что вы не было указать ширину для формы и благодаря тому, что она принимает 100% width.And таким образом margin:0 auto не работает.

Я сделал fiddle .Please проверить его ..

2

Просто дайте выравнивающей центр для колонтитула DIV

<div id="footer" align="center"> 
+0

Это гораздо лучшее решение, чем указание ширины в CSS. +1 – Aditya

Смежные вопросы