css center div inside container?

html class center
Marco Tck picture Marco Tck · Sep 15, 2013 · Viewed 47.3k times · Source

This HTML code works:

<div class="MyContainer" align="center">
    <div>THIS DIV IS CENTERED</div>
</div>

But I would like to do it at the css of the container, something like:

.MyContainer{
    align: center;
}

So all my containers will center the divs inside.

Answer

Itay picture Itay · Sep 15, 2013

The CSS property for the text align is called text-align not align like in the inline DOM attribute.

If you want to center a block element (like div, p, ul, etc...) itself you need to set its width and set the horizontal margins to auto.

For example, the following code will make every div inside an element with the MyContainer class 80% the size of its parent and center it in the middle of its container.

.MyContainer div {
    margin: 0 auto;
    width: 80%;
}

jsFiddle Demo

Related questions

How to assign multiple classes to an HTML container?

Is it possible to assign multiple classes to a single HTML container? Something like: <article class="column, wrapper">

Read More
How can I select item with class within a DIV?

I have the following HTML: <div id="mydiv"> <div class="myclass"></div> </div> I want to be able to use a selector that selects the inside div, but specific for the mydiv …

Read More
Add and remove a class on click using jQuery?

Please see this fiddle. I am trying to add and remove a class on li elements that are clicked. It is a menu and when one clicks on each li item I want it to gain the class and all …

Read More