1

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.

Pranav 웃
  • 8,469
  • 6
  • 38
  • 48
user3052552
  • 29
  • 1
  • 2
  • possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) – Phrogz Dec 01 '13 at 00:51

3 Answers3

1

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.

Community
  • 1
  • 1
display-name-is-missing
  • 4,424
  • 5
  • 28
  • 41
  • Is there a way to make it centered permanently, meaning I wont have to change it later? Instead of putting in numbers, can I put something that will auto-center it? – user3052552 Dec 01 '13 at 00:36
1

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

CSS:

.cont
{
    position: relative;
    margin: 0 auto;
}
Ani
  • 4,473
  • 4
  • 26
  • 31
1

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/

Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54