Центрируйте форму, содержащую кнопку в элементе div

Question

Я пытаюсь выровнять <form> по центру <div>.Это то, что я делал до сих пор:

<div style="height:auto; margin: 0 auto; align:center;">
  <form style="width:50%; margin:0 auto;" onSubmit="return false;">
  </form>
</div>

Это центрирует форму, но есть ли другой способ сделать это более профессионально?

У меня также есть кнопкав этой форме, которая выровнена по умолчанию слева.Я пытался изменить выравнивание, но это не удалось.

Кто может мне помочь?

Answer 1

Самый простой способ - удалить CSS из HTML и удалить align:center.

Таким образом button естественным образом выравнивается влево.

div{
    height:auto; 
    margin:0 auto; 
    border:1px solid blue;
}

form{
    border:1px solid red;
    width:50%; 
    margin:0 auto;
}

HTML

<div>
  <form>
      <button></button>
  </form>
</div>

Пример: http://jsfiddle.net/kCt7k/

---

РЕДАКТИРОВАТЬ:

Мне нужно, чтобы кнопка была в центре.

Извините, неправильно истолковал это в оригинальной Q.

В этом случае вы можете использовать text-align:center

form{
    border:1px solid red;
    width:50%; 
    margin:0 auto;
    text-align:center;
}

Пример 2: http://jsfiddle.net/kCt7k/1/

Однако это может мешать другим элементам в форме.

---

Вы можете просто установить button как элемент block и наложить на него поля.

button{
    width:100px;
    display:block;
    margin:0 auto;
}

Пример 3: http://jsfiddle.net/kCt7k/2/

Answer 2

[есть] есть ли другой способ стать более профессиональным?

<div style="height:auto; margin: 0 auto; align:center;">

Никто еще не упомянул эту ошибку, но align не является свойством CSS.

Возможно, вы имели в виду align как атрибут <div> ...

<div align="center">

Однако это устарело, поэтому центрирование по горизонтали в пределах <div> будет правильно выполнено с text-align ...

<div style="text-align: center;">

Answer 3

С css все в порядке, но IMO "правильный" способ сделать это - через отдельный файл css. То же самое с onsubmit, который должен быть через отдельный jquery или js. Для выпуска кнопки мне нужно увидеть CSS из таблицы стилей и любой встроенный CSS, который вы используете. может быть любое количество причин, по которым что-то другое переопределяет желаемое поведение.

Один совет с css: если элемент работает неправильно, поместите сплошную цветную рамку в 1 пиксель вокруг него, и затем вы сможете увидеть, где он отображается в браузере. Затем вы можете поместить границы вокруг других элементов и посмотреть, где объекты перекрываются или выталкивать элемент из нужной позиции.

Answer 4

Быть «более профессиональным» может повлечь за собой перемещение атрибутов стиля в отдельный файл CSS.Кроме этого, это кажется вполне разумным подходом.

Хотите, чтобы я угадал, что вы сделали с неправильной кнопкой?