Menu
I want to center my element but when I use
margin-left: auto; margin-right: auto; it doesn't work!
this is my html
<section id="t"> <article class="tc">Hi</article> <article class="tc">Hi agian!</article> </section> and this is my css:
#t { margin-left: auto; margin-right: auto; margin-top:10px; } .tc { margin-left: auto; margin-right: auto; width: 600px; display: inline; border-style: solid; border-width:1px; } and you can see the result here.
Can anybody help me?
697
margin: auto; , it will not work. This is because by default the block-level elements such as a div, p, list, etc take up the full width of its parent element, and no space is left to adjust the element horizontally. So, the very first thing you need to check is whether you have set the width of the element or not.
The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
The margin property may be specified using one, two, three, or four values. Each value is a <length> , a <percentage> , or the keyword auto . Negative values draw the element closer to its neighbors than it would be by default.
The element must be block-level, e.g. display: block or display: table. The element must not float. The element must not have a fixed or absolute position.
margin-left: auto; margin-right: auto; would not effect the element width display:inline.
If your want it works, you should give a fixed width, and set display:block or display:inline-block.
129
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
