Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.
lupidol

lupidol

Programmer
Apr 23, 2008
125
IL
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: 
[img]https://res.cloudinary.com/engineering-com/image/upload/v1490266656/tips/to_forum_dnvy8n.gif[/img]
<!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.
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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; [COLOR=#CC0000] right: 25%;[/color]} 
</style> 
</head> 
<body> 
<div class="one">one 
<div class="second">second<div>
</div> 
</body>
</html>

Steve
 
Upvote 0 Downvote
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 !
 
Upvote 0 Downvote
Thanks datamasher.
I'd like to stick to "margine: auto" so I'll take vacunita's advise.
 
Upvote 0 Downvote
Hi,

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

Steve
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
398
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
107
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
617
Mike Lewis
Mike Lewis
Lets Code
  • Locked
  • Question
Inline element into a block level element
Replies
1
Views
175
spamjim
spamjim
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
470
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top