Centring divs in another div

Question

I am creating a website and I have a div which sets the main (called page) and max width of the main content. How would I in CSS set another div to be 50% of the page so it will always be centred. Thanks.

Main content Div:

#page{ /* Sets page width and colour*/
margin-left: 200px;
min-width: 400px;
max-width: 982px;
background-color: #FFFFFF;
padding-bottom: 5px;
}

EDIT:

    <div class="Serverimg">
       <div class="CenterDiv">
         <img src="C:\Users\Corey\Documents\Web Project\images\serverroom.jpg" class="ServerRoom"  alt="" style="width:400px;height:300px": />
       </div>
    </div>

WITH CSS:

 #CenterDiv {
 width: 50%;
 margin: 0 auto;
 }

score 2 · Accepted Answer · answered May 04 '15 at 18:05

2

To do this you put another div inside of it and add the following CSS:

#centerDiv {
     width: 50%;
     margin: 0 auto;
}

What you are doing is telling the centerDiv to always be 50% of the width of page and then assigning it equal margins on either side so it floats in the center.

answered May 04 '15 at 18:05

SRing

694
6
16

Hi, I tried this and it still isn't working? i've placed my code in the main question thanks – NewCoder2015 May 04 '15 at 18:10
First, you are using `class`, not `id`. This means you need to use `.` as opposed to `#` in front of your ids in CSS. Second, your main `div` is named `Serverimg` in your `html` and `page` in your `CSS`. They need to match. – SRing May 04 '15 at 18:16

Centring divs in another div

1 Answers1