CODEWITHSUNDEEP
htmlcss
Kevin Stachura
Kevin Stachura

Reputation: 83

Centering list <div> in page

For some reason, I can't seem to center this list element in the page. It contains three equally-sized boxes, and I'd like them to always stick to the center.

body {
    width: 100%;
}

.boxes {
    display: block;
    margin: 0 auto;
}

.box-container {
    display: block;
    margin: 0 auto;
    border: 1px solid blue;
}

.all {
    float: right;
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px 10px 10px 10px;
}

.clear {
    clear: both;
}

<body>
    <div class="box-container">
        <div class="box1 all"></div>
        <div class="box2 all"></div>
        <div class="box3 all"></div>
        <div class="clear"></div>
    </div>
</body>

Upvotes: 0

Views: 60

Answers (6)

Mr.G
Mr.G

Reputation: 3559

Try This it work perfectly:

HTML

<body>
    <div class="box-container">
        <div class="box1 all"></div>
        <div class="box2 all"></div>
        <div class="box3 all"></div>
        <div class="clear"></div>
    </div>
</body>

css

body {
    width: 100%;
}

.boxes {
    display: block;
    margin: 0 auto;
}

.box-container {
    display: block;
    margin: 0 auto;
    border: 1px solid blue;
}

.all {
    background: none repeat scroll 0 0 red;
    float: right;
    height: 100px;
    margin-right: 13%;
    width: 100px;
}

.clear {
    clear: both;
}

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Try:

.box-container {
    text-align:center;
}
.all {
    display:inline-block;
}

NOTE:

inline-block leaves white-space between elements. To remove this space, write elements on same line rather than writing them on separate lines.

Change:

to

<div class="box-container">
        <div class="box1 all"></div><div class="box2 all"></div><div class="box3 all"></div>
</div>

DEMO here.

Upvotes: 0

Harry
Harry

Reputation: 394

Remove the float: right from each the all class. That is causing the boxes to move to the right. Make the box-container center aligned (this will bring them to the center), and change the display of each box to inline-block.

 .box-container {
     display: block;
     margin: 0 auto;
     border: 1px solid blue;
     text-align: center;
 }

 .all {
     width: 100px;
     height: 100px;
     background: red;
     margin: 10px 10px 10px 10px;
     display: inline-block;
 }

Upvotes: 0

Ry-
Ry-

Reputation: 224913

For margin: auto to work, your elements need to have a width given to them somehow (usually through width). The usual solution to make things scale automatically is display: inline-block; (though flexbox makes this much easier when supported):

.box-container {
    display: inline-block;
    text-align: left;
}

Then you’d give its parent text-align: center;. Alternatively, width: 300px; (with perhaps a minor adjustment or removal of spaces) seems like it could work well here; it depends on your actual layout.

body doesn’t need width: 100%;, by the way.

Upvotes: 1

misterManSam
misterManSam

Reputation: 24692

Give your box container a width:

CSS

.box-container {
    display: block;
    margin: 0px auto;
    width: 360px;
    border: 1px solid blue;
}

Example here: http://jsfiddle.net/82WCU/

Upvotes: 0

Coder101101010
Coder101101010

Reputation: 144

For everything you want to center horizontally, you should set its margin-left and margin-right to 'auto'.

Upvotes: 0

Related Questions