CODEWITHSUNDEEP
htmlcssalignment
Ryan Sparks
Ryan Sparks

Reputation: 309

Align a CSS element with a set width

I have a CSS element which is supposed to be a fixed width of 1000 pixels. Here's the CSS code I have:

#content
{
    margin:auto;
    background-color:#DDDDDD;
    position:absolute;
    top:110px;
    width:1000px;
}

Tis sets the width, location, and color perfectly, but it's always aligned to the left. I want the entire block of text aligned to the center. I tried using HTML to do it:

<div id="content" align="center">
Some test content
</div>

however this only alignes the text inside of the element, not the element itself. Here's what it looks like:

http://gyazo.com/b44a28edfecb9cbfc3a5afe93fa08d8a

Any help aligning it to the center is much appreciated. Thanks in advance!

Upvotes: 0

Views: 87

Answers (4)

Yelko
Yelko

Reputation: 64

<!DOCTYPE>
<html>
    <head>
        <style>
            #content{
                background-color:#DDDDDD;
                width:1000px;
            margin: 0 auto;
            }
            #wrapper{
            width: 1300px;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content" align="center">Some test content</div>
        </div>
    </body>
</html>

Upvotes: 0

Victor H&#228;ggqvist
Victor H&#228;ggqvist

Reputation: 4486

You should center the div with css instead.

Something like this:

#content
{
background-color:#DDDDDD;
width:1000px;
margin: 110px auto; /*center the element and set top margin to 110px*/
}

<div id="content">
Some test content
</div>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105923

if you want to center an element from an absolute position, this one stil should be still in static context. ex : http://jsfiddle.net/GCyrillus/bNFd5/

.absolute {
    position:absolute;
    left:0;
    width:100%;
}
.center {
    width:500px;
    margin:auto;
    border:solid;
}
.static {
    padding-top:5em;
}

Upvotes: 0

Omega
Omega

Reputation: 3038

Remove position:absolute; to center it horizontally.

I can't see much of your html structure. If your vertical position is affected by this, then try changing margin:auto to:

margin: 110px auto 0; or margin: 0 auto

Upvotes: 1

Related Questions