Vertically aligning a div inside another div

Redgie · 2 Mar 2011 at 21:34

Hi there, from googling round this seems like an age old problem best solved by using tables, but in fear of missing something obvious I felt I should post here!

I'm trying to align a div in the exact centre of another div, both vertically and horizontally, I've achieved this horizontally but can't seem to get it to work vertically.

The CSS of the parent div is:

Code:

.contentbox
{
	background-image:url('/images/ContentBoxV1.jpg');
	height:200px;
	width:1024px;
}

While the CSS of the inner div is:

Code:

.innercontentbox
{
	background-image:url('/images/InnerContentBoxV2.jpg');
	height:170px;
	width:300px;
	margin-left:auto;
	margin-right:auto;
}

The live site is www.cypherhosting.co.uk , the relevant element is the not-so-centrally-aligned content box inside the bigger content box under the menu buttons.

Thanks guys!

Shadows1990 · 2 Mar 2011 at 22:00

Add margin-top:15px to the .innercontentbox styling.
Only problem is that it won't stay centered if the box grows.

I've been looking for a solution for a very similar problem I was having, but like you, I only found solutions involving table-cells

Russinating · 2 Mar 2011 at 22:22

With most problems there's usually a solution that involves going about the problem a different way. Why do you need that div centered vertically?

Steve09 · 2 Mar 2011 at 23:01

@Redgie
It's not aligning vertically in Internet Explorer but it is in Firefox.
I'm sure there are other ways, but adding what has been suggested will probably work.

Shadows1990 said:
Add margin-top:15px to the .innercontentbox styling.
Only problem is that it won't stay centered if the box grows.

I've been looking for a solution for a very similar problem I was having, but like you, I only found solutions involving table-cells

Is this what you mean?
When you add text and line breaks to innercontentbox, that grows bigger as does contentbox?

Code:

.contentbox {
	
	
	height:auto;
	width:1024px;
	background-color:#999;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:15px;
	padding-top:15px;
	
}

Code:

.innercontentbox {
	
	height:auto;
	width:300px;
	margin-left:auto;
	margin-right:auto;
	background-color:black;
	color:#fff;
		
}

Redgie · 3 Mar 2011 at 09:26

Shadows1990 said:
Add margin-top:15px to the .innercontentbox styling.
Only problem is that it won't stay centered if the box grows.

I've been looking for a solution for a very similar problem I was having, but like you, I only found solutions involving table-cells

Unfortunately that pushes the parent div up with it, which is not what I'm going for

Cuchulain · 3 Mar 2011 at 09:38

Code:

<style type="text/css">
	#myoutercontainer { position:relative }
	#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
	<div id="myinnercontainer">
		<p>Hey look! I'm vertically centered!</p>
		<p>How sweet is this?!</p>
	</div>
</div>

http://phrogz.net/css/vertical-align/index.html

Redgie · 3 Mar 2011 at 09:57

That somewhat worked, but meant that it took away the previously working horizontal centering and means that when the page expands vertically the elements move out of the center.

Russinating · 3 Mar 2011 at 10:08

I still don't know why you'd want to centre something vertically, especially in this example?

Redgie · 3 Mar 2011 at 10:54

Because the box needs to appear in the centre of the box it is in, or it will look graphically wrong (As it currently does).

Russinating · 3 Mar 2011 at 11:02

Why the center and not just pushed 15px down?

Also, is there any particular reason you're using 'onclick' for your navigation tabs (which will fail if Javascript is disabled)? You can just wrap the div's in normal <a> tags instead.

Redgie · 3 Mar 2011 at 11:22

That was just done for simplicity, it's only a concept site at the mo

If I push it down by 15px it still has the same problem, by saying that I'm trying to center it, I don't mean center it via centering code, I mean center it by dropping it down by 15px without pushing anything else away, which margins and padding both do.

Russinating · 3 Mar 2011 at 11:31

To be honest, I have no idea what you're trying to achieve here. Do you have a design mockup of what the site's supposed to look like when finished?

tsinc80697 · 3 Mar 2011 at 11:34

Code:

.contentbox {position: relative;}

.innercontentbox {position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -100px; height: 200px; width: 200px}

The negative margins need to be half the width/height that you have defined. This will position the innercontentbox to the absolute centre of the contentbox container

Redgie · 3 Mar 2011 at 19:35

Russinating said:
To be honest, I have no idea what you're trying to achieve here. Do you have a design mockup of what the site's supposed to look like when finished?

Not really, or not one outside of my head anyway

The box is aligned centrally now (Thanks guys

) but because of the use of relative and absolute positioning, adding them side by side doesn't work particularly well, I'd rather do it without any form of positioning, and so see the use of tables as perhaps my only option

craptakular · 3 Mar 2011 at 20:38

display: block;
margin-left: auto;
margin-right:auto;
position: relative;
top: Xpx;

Does that help at all?

sparkey196 · 3 Mar 2011 at 21:33

Use javascript. Very easy to do with jquery.

Redgie · 7 Mar 2011 at 19:53

Oxy said:
display: block;
margin-left: auto;
margin-right:auto;
position: relative;
top: Xpx;

Does that help at all?

Thank you, this did it

Along with the width and height declarations (Otherwise it didn't quite fit).

Thank you very much, and to everybody else who helped!