Site does not seem to "center"

Question

I am learning html/css and currently am trying out an example in a book I am using. The content in the "site" should be centered, but when I open my files in browser and look in Firefox, the content seems left justified. Below is the HTML and CSS (very simple). I really appreciate any help!!

<!DOCTYPE html>
<html>
    <head>
        <title>tayco</title>
        <link href="css/styles.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div id="header">
                <h1>Logo</h1>
            <div id="nav">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div> 
    </div><!--end header-->
    <div id="content">
        <div id="feature">
            <p>Feature</p>
        </div>
        <div class="article column1">
            <p>Column One</p>
        </div>
        <div class="article column2">
            <p>Column Two</p>
        </div>
        <div id class="article column3">
            <p>Column Three</p>
        </div>
    </div>
    <div id="footer">
        <p>&copy:  Copyright 2011</p>
    </div>
</body>
</html>





body {
    width: 960px;
    margin: 0 auto;}
#content {
    overflow: auto;
    height: 100%;}
#nav, #feature, #footer {
    background-color: #efefef;
    padding: 10px;
    margin: 10px;}
.column1, .column2, .column3 {
    background-color: #efefef;
    width: 300px;
    float: left;
    margin: 10px;}
li {
    display: inline;
    padding: 5px;}

It centers fine for me. Here is it in jsfiddle: http://jsfiddle.net/ng9UG/ — smdrager, Feb 13 '14 at 04:42

score 1 · Answer 1 · answered Feb 13 '14 at 04:53

1

Use text-align:center for your contents...

Jsfiddle:http://jsfiddle.net/fUy7b/1/

#content {
    overflow: auto;
    height: 100%;
    text-align:center; /*here is the code*/
}

answered Feb 13 '14 at 04:53

Krish

1,884
2
16
40

Ah thank you! The text-align is what I was searching for! – tayco Feb 14 '14 at 05:12

score 0 · Answer 2 · answered Feb 13 '14 at 04:43

0

Put a width and margin on #content not body

body { }

#content {
    width: 960px;
    margin: 0 auto;
}

answered Feb 13 '14 at 04:43

actual_kangaroo

5,971
2
31
45

score 0 · Answer 3 · answered Feb 13 '14 at 05:17

body{
  width: 960px;
  margin: 0 auto; 
  text-align:center;
        }

What do you want exactly..? If you want everything to be centered even the logo,the footer and all the contents,use the above in your CSS or use the above code by @Nikhil krishnan.

Ankit Prajapati · Answer 4 · 2017-01-24T21:58:52.510

0

To align the contents at the center of the screen, please include the following CSS rule (Classes) in your Style Sheet:

<style>
    #nav, #feature, #footer, #content
    {
        text-align: center;
    }
</style>

edited Jan 24 '17 at 21:58

answered Feb 13 '14 at 05:20

Ankit Prajapati

1,425
3
14
22

Site does not seem to "center"

4 Answers4