INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

How do I place an element at the center of its' ancestor?

How do I place an element at the center of its' ancestor?

(OP)
Hi everyone,
My code consists of 2 elements. "One" is the ancestor and "second" is child.
I try to place "second" at the bottom of "one" in the middle of its' width.
here is my code:

CODE


<!DOCTYPE html> 
<html> 
<head> 
<style> 
.one 
{ position:relative; border: 2px solid green; height: 200px; width: 50%; } 
.second{ position: absolute; border: 2px solid red; width: 50%; bottom: 0; margin: auto; } 
</style> 
</head> 
<body> 
<div class="one">one 
<div class="second">second<div> 
</div> 
</body>] 
The attached screenshot displays the result: "second" is placed at the bottom of "one" but fails to be at its' middle.
Could anyone tell me why?>
Thanks.

RE: How do I place an element at the center of its' ancestor?

There's several ways to accomplish this some more convoluted than others. Basically the main issue, is that margin:auto; does not work on absolutely positioned divs.

However the easiest way I've found to do this, is to add a third div around your bottom div. That way one div sets the position to the bottom, while the other div centers itself inside the bottom placed div.

CODE

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.one 
{ position:relative; border: 2px solid green; height: 200px; width: 50%; } 
.second{border: 2px solid red; width: 50%; bottom: 0; margin: auto; } 

.posdiv{position:absolute; bottom:0; overflow:hidden; width:100%;}
</style> 
</head> 
<body> 
<div class="one">one 
	<div class="posdiv">
		<div class="second">second<div> 
	</div>
</div> 
</body> 

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

RE: How do I place an element at the center of its' ancestor?

Hi,

In your second div css replace margin: auto; with right: 25%;

See revised code below.

CODE

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.one 
{ position:relative; border: 2px solid green; height: 200px; width: 50%; } 
.second{ position: absolute; border: 2px solid red; width: 50%; bottom: 0;  right: 25%;} 
</style> 
</head> 
<body> 
<div class="one">one 
<div class="second">second<div>
</div> 
</body>
</html> 

Steve

RE: How do I place an element at the center of its' ancestor?

(OP)
Thank you so much vacunita for letting me know that "margin: auto" does not work on absolutely positioned divs. I didn't know that ! I'm also grateful for the solution you posted !

RE: How do I place an element at the center of its' ancestor?

(OP)
Thanks datamasher.
I'd like to stick to "margine: auto" so I'll take vacunita's advise.

RE: How do I place an element at the center of its' ancestor?

Hi,

No problem my friend. Glad you've got a workable solution.

Steve

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close