Cannot center elements in css

Question

I downloaded a template and edit it. now I want to center the one_third elements but the

margin-left: auto;
margin-right: auto;

doesn't work.

This is the template in jsfiddle.

Can anybody help me?

Are you trying to center the text? or the elements with respect to the page? — invalidsyntax, Feb 06 '13 at 18:03
@invalidsyntax I didn't try to center the text! but I didn't understand you second sentence. — ahmadali shafiee, Feb 06 '13 at 18:06
I am asking only to help understand the question. In my second sentence, I am asking if you want each ```one_third``` element to be in the center of the page (or parent container). — invalidsyntax, Feb 06 '13 at 18:10
@invalidsyntax yes I want! actually I want all the `#services`'s childs in center of the page. — ahmadali shafiee, Feb 06 '13 at 18:19
I believe that the reason why they are not appearing to be centered is because they are set up to act as thirds. Perhaps if you only will have 2 columns, you may want to look into setting it up to use two instead of three. — invalidsyntax, Feb 06 '13 at 18:25

Steve · Accepted Answer · 2013-02-07T20:54:23.657

For margin-left:auto; and margin-right:auto; to work, the element needs to have a width. So try something like:

margin-left: auto;
margin-right: auto;
width: 600px;

UPDATE:

Since you seem to alter your examples all the time, here is a very basic understanding of how display and margins work:

To have any box centered within another box, you need to do two things:

a) Give the outer box a width (otherwise the inner box doesn't know what to center against

b) The inner box needs to have margin: 0 auto (this is the same as margin-left: auto; margin-right: auto;)

Also, both boxes need to be block level elements (i.e. have display: block, NOT display: inline;)

So put together it will look like this:

HTML:

<section id="outer">
    <section id="inner"></section>
</section>

CSS:

#outer {
    width: 600px;
    display: block;
    border: 1px solid red;
}
#inner {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    border: 1px solid green;
}

This will give you a green box of 200px by 200px centered within a red box of width 600px.

Now, if you want two elements side by side within the green box, you can add your inline elements there, i.e.

<section id="outer">
    <section id="inner">
        <article>Hi</article>
        <article>Hi agian!</article>
    </section>
</section>



#outer {
    width: 600px;
    display: block;
    border: 1px solid red;
}
#inner {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    border: 1px solid green;
}
#inner article {
    display: inline;
}

Of course your example won't work... first off, you gave your `.tc` elements `display:inline;`. Inline elements can't be centered. Secondly, you don't have a width on the outer container. If the outer container doesn't have a width, it doesn't make sense to center something inside. Take a look at this example to see it work: http://jsfiddle.net/2sagZ/14/ — Steve, Feb 07 '13 at 18:33
I want the elements in one line. I asked the question [here](http://stackoverflow.com/questions/14756204/why-marginauto-doesnt-work). — ahmadali shafiee, Feb 07 '13 at 18:40
No offense, but you might want to step back and take some time to read about the effects of `display:block` and `display:inline` and how those affect positioning of elements. You seem to throw together new examples all the time without understanding the basics. Either try to learn from the examples given to you or stick to one example and solve it. — Steve, Feb 07 '13 at 20:41

Cannot center elements in css

1 Answers1