CODEWITHSUNDEEP
htmlcss
user3380292
user3380292

Reputation:

having trouble centering my section element

This is probably a silly question but I can't seem to figure out how to auto center my section

live demo: http://iam.colum.edu/students/jordan.max/algorerhythm/index.html#

I have tried to add

margin: 0 auto;

to my div#content, with no luck.

The only way I was able to get it be centered was manually entering in 

margin-left: xxpx

but I want it to be centered based on what content is in it. Any thoughts? Thanks in advance.

Rest of CSS

body
{
    background: #C1CDC1;
}

h1
{
}

h2
{
    margin-top: -40px;
    margin-left: 120px;

}

h1.mainT
{
    width: 590px;
    font-family: 'Montserrat', sans-serif;
    margin-left: 10px;
    font-size: 2.5em;
}

h2.subT
{
    width: 130px;
    font-family: 'Open Sans Condensed', sans-serif;
}

h3 
{
    display: inline-block;
    font-family: 'Open Sans Condensed', sans-serif;
}

footer
{
    color: #FCFCFC;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: .85em;
}

section#nav
{
    width: auto;
    margin-left: 550px;
    margin-top: -80px;
    padding: 5px;
    word-spacing: 80px;

}

div#navContainer
{
    height: 100px;
    background: #FCFCFC; /* grey99*/
    box-shadow: 2px 3px 5px #333;

}

div#content
{
    height: 100px;
    width: auto;
    background: #FCFCFC; /* grey99*/
    box-shadow: 2px 3px 5px #333;
    display: inline-block;

}
section#contentContainer
{
    float: none;
    padding-top: 20px;
    margin: 0 auto;
}

HTML

<script>
$(document).ready(function () {
        $('section#contentContainer').hide();
        var $as = $('a.contentDown').click(function () {
            //show back button, move it from left +300
            $('section').show();
         }); //closes click for contentDown
    }); //closes ready
</script>

</head>

    <body>
    <div id="navContainer">
            <h1 class="mainT"> Al Gore Rhythm Labs </h1>
            <h2 class="subT"> Chicago, IL </h2>


        <section id="nav">
                <h3><a href="#" class="contentDown"> Assignments </a></h3>
                <h3><a href="#" class="contentDown"> Writings </a></h3>
                <h3><a href="#" class="contentDown"> Presentations </a></h3>
        </section>
    </div>


    <section id="contentContainer">
        <div id="content">
        <p> hello motto
        </p>
        </div>
    </section>

    </body>

    <footer> 
    <p> Jordan Max 2014</p>
    </footer>
</html>

Upvotes: 0

Views: 40

Answers (2)

Nor Sakinah Abdullah
Nor Sakinah Abdullah

Reputation: 371

Maybe this is the solution (don't forget to remove style="display: none;" for your section#contentContainer)

Result: enter image description hereAdd text-align center; to your section#contentContainer

 section#contentContainer 
 {
 float: none;
 padding-top: 20px;
 margin: 0 auto;
 text-align: center;
 }

Good Luck!!

Upvotes: 1

Gautam Bhutani
Gautam Bhutani

Reputation: 405

Add 'align="center"' to your section element. As follows:

<section id="contentContainer" align="center">

This is not the preferred way but if you want to do it only in CSS, you would need to do 'text-align: center' on the element to center align it's internal 'inline-block' element.

CSS: text-align: center

Upvotes: 0

Related Questions