Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Center one element above another element which is responsive and scales depending on screen size?

Center one element above another element which is responsive and scales depending on screen size?

Problem

I have a responsive image gallery; jquery plugin called Galleria. I am trying to position div Element on top of image gallery and center it vertically and horizontally inside Galleria regardless of screen size.

This is how it looks simplified inside my view:

I know if I would like to the position input-box above other elements and center it vertically and horizontally I would do something like this:

#input-box{
  position:absolute;
  top: 50%;
  right: 0 ;
  bottom : 0 ;
  left : 0 ;
  margin : auto;
  width: 30px;
  z-index: 26;
}

This way element is always centered regardless of screen size. The problem is it is impossible to adjust it like that to be centered above Galleria because Galleria is responsive and scales differently. I tried to put

inside
but then it doesn't show at all. How can I accomplish to center one element above another element which is responsive and Scales Depending on screen size?

Thank you for your help!

Problem courtesy of: user3304086

Solution

Can you not just give it another wrapper, something like:


This should allow .galleria to be manipulated by the jquery as normal, which should drive the size of the .gallery-wrapper. Then with .gallery-wrapper set to position: relative; and the #input-box set to position: absolute, you should be able to center it as you desire on that extra wrapping element, which itself is being sized by the .galleria code.

Solution courtesy of: ScottS

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Center one element above another element which is responsive and scales depending on screen size?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×