CODEWITHSUNDEEP
htmllayoutcss
benske
benske

Reputation: 4050

Center a container ul/div in a fluid layout

I want to center a container div in a fluid lay-out (content with id: articles_grid has to be centered): http://www.benskesblog.com/projects/frontend/project/index.htm

I've tried a lot a methods, but no one did work. (for example: margin: 0 auto;).

Could someone tell me how to solve this?

Thanks

Upvotes: 2

Views: 5334

Answers (2)

Beatriz Oliveira
Beatriz Oliveira

Reputation: 659

I believe changes are pretty simple to achieve what you need:

#articles_grid {
...
text-align: center; /*add this*/
}

#articles_grid li {
...
/* float:left; remove this */
display: inline-block; /*add this*/
}

Upvotes: 3

sandeep
sandeep

Reputation: 92793

You can give display:inline-block to you DIV which you want in center & define text-align:center in his parent DIV. For example you can do like this:

CSS:

.parent{
    background:red;
    text-align:center;
}
.center{
    text-align:left;
    display:inline-block;
    *display:inline;/* IE7 */
    *zoom:1;
    background:yellow;
    min-height:100px;
}

HTML:

<div class="parent">
    <div class="center">lorem ipsum</div>
</div>

Check the example below:

http://jsfiddle.net/aNR3a/

Upvotes: 3

Related Questions