CODEWITHSUNDEEP
htmlcss
user3052552
user3052552

Reputation: 29

Center a CSS box?

HTML: 

<div class="cont">
    <center>
        <div class="xmdiv">
            <img class="xmenu" src="media/file1.png">
            <img class="xmenu" src="media/file2.png">
        </div>
    </center>
    <p>-snip-</p>
</div>

CSS

.cont {
        position: relative;
        margin-top: 3%;
        background-color: transparent;
        width: 65%;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 1px;
        -moz-box-shadow: 0px 0px 11px #000000;
        -webkit-box-shadow: 0px 0px 11px #000000;
        box-shadow: 0px 0px 11px #000000;
        font-family: 'Open Sans', sans-serif;
        color: #070707;
        font-size:15px;
        font-weight:300;
        text-align:justified;
        line-height:1.5;
}
p {
    margin-left: 8px;
    margin-right: 8px;
}

What it looks like: enter image description here

I want it to be centered, how do I do that? Tried looking it up online, and it didn't really work.

Upvotes: 1

Views: 132

Answers (3)

display-name-is-missing
display-name-is-missing

Reputation: 4399

To center a div (and many other types of elements), use this CSS code:

.cont { 
   margin: 0 auto;
   width: XXXpx;
}

JSFiddle.

Make sure to specify the width, or else the div won't be centered.

Edit

To center an element without specifying with, you could do something like this (not sure if this will work in all browsers, however):

body { text-align:center; }
.cont { display:inline-block; }

Side-note

Don't use the center tag, it is deprecated. You can read more about it here.

Upvotes: 1

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

If you need to center a div vertically and horizontally on your page, use:

div {
    width: 100px;
    height: 100px;
    background-color: #000000;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

http://jsfiddle.net/65adr/48/

In case you need to center it just horizontally, use:

center
{
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Just define a width for the element, in this case i added 200px for example.

http://jsfiddle.net/65adr/50/

Upvotes: 1

Ani
Ani

Reputation: 4523

Is this what you want ? Link: http://jsfiddle.net/jtFUs/

CSS:

.cont
{
    position: relative;
    margin: 0 auto;
}

Upvotes: 1

Related Questions