0

On a project I have four absolutely positioned elements on a page that sit inside an absolutely positioned container (the latter in order to align them relative to the viewport’s bottom, while more content will follow below the viewport). The four elements are next to each other and do not overlap.

Is there a way to (dynamically) center the four elements inside their absolutely positioned parent? I know it sounds weird, since absolute positioning means exactly no automatic placement. Dynamically would mean that responsively the elements change both size and position at a certain breakpoint, but should still be centered horizontally in the viewport at all times.

I could think of a solution like this with an additional inner div, but didn’t get my head around to actually solving the puzzle, since I don’t know a good way for the inner div to grab the total width of its four absolutely positioned child elements:

<div class="myAbsoluteContainer">
    <div class"myInnerDivForCentering">
        <div class="myAbsoluteChildElement" id="child1"></div>
        <div class="myAbsoluteChildElement" id="child2"></div>
        <div class="myAbsoluteChildElement" id="child3"></div>
        <div class="myAbsoluteChildElement" id="child4"></div>
    </div>
</div>
physalis
  • 243
  • 3
  • 16
  • Do you want the four children to be directly on top of eachother? – ntgCleaner Nov 30 '15 at 15:10
  • No, they are sitting nicely next to each other. Thanks for asking, will add it in! – physalis Nov 30 '15 at 15:11
  • Second question, do you know the heights and widths of the children? percents or pixels? – ntgCleaner Nov 30 '15 at 15:12
  • They are in pixels and added inline by extracting the data from its WordPress image attachment that is placed inside these four child elements (each one has different sizes). – physalis Nov 30 '15 at 15:14
  • I see, so each innerDivForCentering has content on which you do not know the size of. – ntgCleaner Nov 30 '15 at 15:17
  • Well, the _myInnerDivForCentering_ div is only a guess of what could help, an additional div inside the absolutely positioned container that could possibly help centering the four child elements that are positioned absolutely ;). – physalis Nov 30 '15 at 15:22
  • 5
    Just wondering, why are the children positioned absolutely if you want them centered? – BurningLights Nov 30 '15 at 15:24
  • 1
    Could you please make a jsFiddle or any other snippet to work on? I'd like to have a look at the current CSS applying. – tao Nov 30 '15 at 15:29
  • Sure, very simplified: https://jsfiddle.net/Lb2c2ykx/1/ . I left out the inner div since I only added it as a suggestion, but it is not a needed element of the website. – physalis Nov 30 '15 at 15:58
  • 1
    Centering these elements will require a positioned wrapper BUT will also mean that the elements would need to be positioned in relation to the wrapper and not the overall container / viewport. What you are asking is quite complex. Try reviewing this (http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div?rq=1 ) and starting over, – Paulie_D Nov 30 '15 at 16:01
  • 1
    I am not sure why you need to absolutely position the children. Is this what you are trying to achieve: http://jsfiddle.net/k65pxydx/. If so let me know and I will put it as an answer. – tw16 Nov 30 '15 at 16:06
  • Well, you nailed it. I was so focused on the whole matter that I didn’t see I could get rid of the absolute positioning of the children. If you leave out the vertical centering (which is not needed for me) and add in margins so I have my positioning for the children (see http://jsfiddle.net/k65pxydx/2/) I have my exact answer ;). – physalis Nov 30 '15 at 16:31

1 Answers1

0

I am not sure why you need to absolutely position the children. Is this what you are trying to achieve: http://jsfiddle.net/k65pxydx ?

.myAbsoluteContainer {
    text-align: center; /* Centers the elements horizontally */
}
.myAbsoluteChildElement {
    display: inline-block;
    vertical-align: middle; /* Centers the elements vertically */
}
tw16
  • 26,989
  • 7
  • 58
  • 62
  • @physalis: Glad I could help. I've added the answer I gave in the comments so that you can accept it. – tw16 Nov 30 '15 at 16:52
  • Thank you for taking out a complicated thinking and turning it into a simple solution for me! – physalis Dec 01 '15 at 07:54