Что означают эти свойства CSS при центрировании элемента формы? - PullRequest
Новая
       35

Что означают эти свойства CSS при центрировании элемента формы?

0 голосов
/ 01 октября 2011

При поиске, как центрировать элемент form в CSS, я обнаружил, что должен установить margin на auto, а затем установить свойство width.Но что здесь представляет width

Когда я, например, устанавливаю width на 350px, я получаю форму по центру, тогда как при установке, например, на 5px, я надеваюне центрируйте его.

Не могли бы вы объяснить, что здесь представляет width

Спасибо.

Ответы [ 2 ]

1 голос
/ 01 октября 2011

Вот простой тест, чтобы показать, что происходит:

HTML 

/* This form will be 200px and centered within its parent element */
<form></form>

/* #formsection is 300px and not centered.  The form it contains will be 
   200px and centered withint #formsection */
<div id="formsection">
    <form></form>
</div

CSS 

/* All forms will be 200px and centered in their parent container */
form {
  width: 200px;        
  margin: 0 auto;      
  border: 1px solid red;   
}

/* #formsection is 300px in width and not centered */
#formsection {
  width: 300px;
  border: 1px solid blue;
}

#formsection form {
  border: 1px solid green;   
}

Вы можете увидеть демо-версию здесь .

Вы упоминали, что width не меняет ширину элемента. Это возможно, если у вашего <form> есть дочерний элемент, который шире, чем вы установили на нем (т. Е. Ваш 5px случай). Чтобы проверить, добавьте border или background-color к дочерним элементам и проверьте, не переполняют ли они форму.

Другой, более быстрый, альтернативный вариант - использовать Web Developer addon для Firefox. После установки CTRL+SHIFT+Y покажет информацию о стиле любого элемента, над которым вы наводите курсор.

1 голос
/ 01 октября 2011

ширина - это ширина самого элемента, когда он отображается, ширину необходимо установить так, чтобы браузер мог автоматически вычислять поля вокруг элемента, чтобы он отображался по центру. Что касается того, почему значение 5px не центрирует элемент, а 350px - я не уверен, я никогда не сталкивался с этой проблемой, возможно, просто размер формы не может быть изменен таким маленьким, поэтому он автоматически изменяется браузером на ширину авто.

...