14 replies [Last post]
cssmatt
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2006-02-09
Posts: 19
Points: 0

Hi, im trying to align a div in the center of the page.

A have managed to align a div in the center of the page, well the text anyway.

But the background of the div is an image. And the image doesnt align, it simply stays to the left, and the text is aligned in the center.

Where am i going wrong??!!

So far i have a "container div" which is acting as a frame for all my other div's to sit into, so that i can arrange them.

The containers left and right margin's have been set to auto?!

Ive tried setting its width to 100%, but this doesnt work!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Simple center align!

The container must be set to a width that is less than that of the viewport if your going to center it! if you have width 100% then thats the full width of available screen so it can't center.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cssmatt
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2006-02-09
Posts: 19
Points: 0

Simple center align!

ive also tried setting it to different lengths, em, px, and non seem to make it center?! :?

Anonymous
Anonymous's picture
Guru

Simple center align!

Show a link.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Simple center align!

Background position of an image will automatically be top left unless you specify otherwise. background-position: center center or 50% 50% will centre your image horizontally & vertically.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

cssmatt
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2006-02-09
Posts: 19
Points: 0

Simple center align!

right, so far i have managed to center align the container. So that now when i resize the window, the divs stay center.

But now i want to have my menu on the side of a div, so that it also moves when resized. At the moment i can only correctly position via fixed, but when i resize, it stays put and the other divs move!!

body {
background: #FFFFCC;
padding:0;
margin:0;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 90%;
color: black;
}

.container {
text-align: center;
}

.header {
background-image: url("./images/header/header1.jpg");
background-position: center;
background-repeat: no-repeat;
height: 200px;
width: 760px;
}

.menu {
top: 200px;
position:absolute;
left: 100px;
}

.content {
background-image: url("./images/content.jpg");
background-position: center;
background-repeat: repeat-y;
width: 760px;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#sideNav {
position: absolute;

width: 1em;
}

#sideNav dd {
position: absolute;
left: 5em;
margin-top: -5em;
width: 10em;
background: #CCCCCC;
border: 1px solid gray;
}

#sideNav ul {
padding: 2px;
}

#sideNav li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}

#sideNav li a {
color: #000;
text-decoration: none;
display: block;
}

#sideNav li a:hover {
color: #FFFFFF;
}

and the html is at

although ive now realised that the center align doesnt work in firefox!![/code]

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Simple center align!

I don't see anythign in your CSS that should cause the container to centre.

Verschwindende wrote:
  • CSS doesn't make pies

cssmatt
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2006-02-09
Posts: 19
Points: 0

Simple center align!

ive managed to get the desired effect using tables ...

but im trying to do it with CSS instead!!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Simple center align!

To centre your container, you'll need to add margin:0 auto to it. To get your left menu where you want it, you'll need to use absolute positioning, but it needs to be in relation to your container, not the viewport. To enable this, you need to add position: relative to .container and then adjust your left & top values from there.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

cssmatt
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2006-02-09
Posts: 19
Points: 0

Simple center align!

Ive got it how i want it to look, but it doesnt align correctly in Firefox, just IE??

Ive implemented your ideas and they worked, but just not in FF!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Simple center align!

cssmatt wrote:
Ive implemented your ideas and they worked, but just not in FF!

Tyssen wrote:
To centre your container, you'll need to add margin:0 auto to it. To get your left menu where you want it, you'll need to use absolute positioning, but it needs to be in relation to your container, not the viewport. To enable this, you need to add position: relative to .container and then adjust your left & top values from there.

Verschwindende wrote:
  • CSS doesn't make pies

cssmatt
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2006-02-09
Posts: 19
Points: 0

Simple center align!

im not sure where your going pineapple??

Ive said that ive tried the things that tyssen had suggested and they still didnt work in FF.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Simple center align!

Your code contains no mention of the margin: 0 auto; code that would center it in the Fox.

Also, your menu doesn't show at all in Firefox.

Also, your link up there is wrong Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

cssmatt
Offline
Regular
Last seen: 14 years 37 weeks ago
Joined: 2006-02-09
Posts: 19
Points: 0

Simple center align!

The reason that the code had no mention of the margin: ; property, was because i tried following the instructions by the letter, and they didnt work.

Also, turns out that the margin needs to be in the header and content div's, not the container itself.

Also, the menu doesnt show in firefox. But this only happens when it inside a DIV, any ideas??

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Simple center align!

To get a container to centre in Firefox, you apply margins to the container itself.

Try this code:

<div id="container">
this will be centred
</div>

#container {
width: 65px;
height: 200px;
margin: 0 auto;
}

Come on, try it, tell me what happens.

Verschwindende wrote:
  • CSS doesn't make pies