Не может центрировать содержимое, используя маржу

Ребят я столкнулся с проблемой: HTML:Не может центрировать содержимое, используя маржу

<!DOCTYPE html> 
<html> 
    <head> 
     <title>CSS</title> 
     <meta http-equiv="author" content="@infinite"><!--Credits--> 
     <link rel="stylesheet" type="text/css" href="css.css"> 
    </head> 
    <body> 
     <form > 
      <input type="submit" value="Submit"> 
     </form> 
    </body> 
</html>

CSS:

body{ 
    background-color:black; 
} 
form{ 
    width:500px; 
    border:solid 5px white; 
} 
input[type="submit"]{ 
    width:200px; 
    border:solid 5px white; 
    border-radius:50px; 
    font-family:Impact,fantasy; 
    font-size:300%; 
    color:white; 
    background-color:inherit; 
    margin:300px auto 300px auto; 
}

Я хочу, чтобы централизовать кнопку отправки в форме, но он по-прежнему прикрепляется к левой стороне формы. «Авто» в поле для кнопки отправки не работает.

Пожалуйста, помогите ..

источник

2015-09-04 codetalker

только текстовое выравнивание по центру будет выполнено! – Sohail

Но если я хочу это сделать, используя свойство margin, могу ли я это сделать? – codetalker

да, вы можете, я добавил ответ – Sohail

Вот рабочий demo

Если вы хотите метод margin: 0 auto работать, элемент должен быть блок , поэтому добавление display: block к кнопке отправки делает трюк.

Ссылаясь от этого answer это хорошо, чтобы знать, что если вы хотите margin: 0 auto работать:

Элемент должен отображать: блок

элемент не должен всплывать

Элемент не должен иметь фиксированное или абсолютное положение

Элемент должен иметь ширину, которая не является автоматической

источник

2015-09-04 15:23:53 Sohail

Спасибо большое! @Sohail – codetalker

уверенный человек, я отредактировал ответ и добавил некоторую ссылку о том, как маржа: 0 автоматическая работа также – Sohail

вы можете попробовать добавить это в форме:

form{ 
    width:500px; 
    border:solid 5px white; 
    text-align: center; 
}

источник

2015-09-04 15:20:51 step

Попробуйте добавить следующее стиль для кнопки входа в:

display:block;

источник

2015-09-04 15:24:44

margin: auto; центр только по горизонтали, когда

Дисплей block (или table)
Элемент не плавающей
Ширина не должна быть автоматической или 100%

Таким образом, чтобы решить вашу проблему, добавьте

input[type="submit"] { 
    display: block; 
}

, как input отображается inline по умолчанию.

источник

2015-09-04 15:51:09 Barun

Не может центрировать содержимое, используя маржу

ответ

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