Menu
I have an input in a form that I am trying to align in the center. Usually margin-left:auto and margin-right: auto fail to respond when display: block isn't added to the CSS. I have added display: block to my CSS but still it isn't display as I would like it to.
I've made a JSFiddle to keep easier to understand: http://jsfiddle.net/XnKDQ/97/
759
So, make sure you apply float: none to your input field. You already have display: block and margin: 0 auto , you just need to set width too. If that doesn't work try adding ! important to the values or make sure your style is not overwritten by something else.
Answer 50faea7446ce3ec6a60004cf You cannot see the effect of margin-right because the 'width' property of div causes the margin of div to have more than 10px distance from the right wall of the body. Consequently, it causes the margin-right property not to have any visual effect.
margin-right: auto; The auto keyword will give the right side a share of the remaining space. When combined with margin-left: auto , it will center the element, if a fixed width is defined.
The percentage is based on the width of the container. margin-left: auto; The auto keyword will give the left side a share of the remaining space. When combined with margin-right: auto , it will center the element, if a fixed width is defined.
In order for margin: 0 auto; to work, in addition to display:block a width needs to be specified.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
