Some Simple Css Questions

[McPaper]

Im making a simple webpage for a course which shows the diversity of css and the styles it can bring. Ive managed to google my way a few properties to give my style some form but I am exhausted myself on two problems.

1. I need to center the entire contents of a holder/wrapper <div> to the dead centre of a page regardless of screen resolution etc.

So far I have managed to centre it only at the top of the page, this was done with

#main{	margin-left:auto;
		margin-right:auto;
		width:50em;      }

Im asking if someone could clarify on expanding this for me.

2. My second problem is most likely even simpler. I want to centre the contents (in this case a line of text and a small picture) in the centre of a <div>.

Again in this case I can only do it horizontally with

text-align: center;

but vertically it still appears at the bottom because the picture is right beside the text.

[urbn]

At 10/23/09 11:32 AM, McPaper wrote: Im making a simple webpage for a course which shows the diversity of css and the styles it can bring. Ive managed to google my way a few properties to give my style some form but I am exhausted myself on two problems.

1. I need to center the entire contents of a holder/wrapper <div> to the dead centre of a page regardless of screen resolution etc.
Im asking if someone could clarify on expanding this for me.

Not sure what you want clarified?

2. My second problem is most likely even simpler. I want to centre the contents (in this case a line of text and a small picture) in the centre of a <div>.
Again in this case I can only do it horizontally with
but vertically it still appears at the bottom because the picture is right beside the text.

Give the image a class, so:

<img class="imgclass" src="whatever.jpg" />

Then float it:

.imgclass{
 float: left; // or right
 margin: 2px 2px 2px 2px; // NWSE, minimum distance text should ever get.
}

Floating images looks much neater than putting images "within" text (as it does without the float) and you should never have: text text IMAGE text text; either.

[Super-Yombario]

I use pseudocode (I think?) for making things go into the center. I make the width and height, say, 50% then make the position fixed (absolute also works) and make top 25% and left 25%.

Not very efficient but it works

[McPaper]

At 10/23/09 01:13 PM, urbn wrote: Not sure what you want clarified?

What I meant is how can I bring the div contents to the centre of a page. Ive already achieved it vertically but lack the knowledge to bring it down vertically centred.

[urbn]

At 10/23/09 04:48 PM, McPaper wrote: What I meant is how can I bring the div contents to the centre of a page. Ive already achieved it vertically but lack the knowledge to bring it down vertically centred.

Well, I only recommend using vertical "centring" if you are using a fixed height, but if you do then the easiest way is to do something like:

#mainContent{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -250px 0px 0px -125px;
  width: 250px;
  height: 250px;
  border: 1px solid #000000;
}

<div id="mainContent">
Testing
</div>

Which if I recall, works pretty much perfectly.