How to vertically align absolutely positioned images on top of one another?


Tags: html,css

Problem :

I have a set of images that I want to use to create an image fader, the images could be any size so I want to set them up in such a way that all images are stacked one on top of each other dead center to their parent container but not completely sure how to achieve this, if anyone could suggest how I do this that would be great.

CSS

.logo-fader {
    width: 200px;
    max-height: 100px;
    margin: auto;
    background: grey;
    text-align: center;
    position: relative;
}

.logo-fader > li {
    /* opacity: 0; */
    -webkit-transition: opacity .6s linear;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
}

.logo-fader > li.show-logo {
    opacity: 1;
}

.logo-fader > li img {
    display: block;
    max-width: 100%;
    max-height: 100px;
}

JSFiddle: http://jsfiddle.net/s7J2V/1/

Basically if I add position absolute to the list item then this cancels out the inline-block which vertically aligns the images



Solution :

enclose each image in a container div, with 100% width and height, position absolute. center the image in the container div. now, the div are stacked one on another, use the fade on the container divs.

HTML:

<div id="FaderHolder">
    <div class="ImgContainer">
        <span class="Centerer"></span>
        <img src="..."/>
    </div>
    <div class="ImgContainer">
        <span class="Centerer"></span>
        <img src="..."/>
    </div>
    <div class="ImgContainer">
        <span class="Centerer"></span>
        <img src="..."/>
    </div>
</div>

CSS:

#FaderHolder
{
    /*YOUR CSS*/
    position: relative;
    width: 200px;
    height: 200px;
}

.ImgContainer
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}
.ImgContainer > img
{
    vertical-align: middle;
}
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

the trick for verticaly centering the img, is using the "Centerer" span, as shown. (if you want an explanation for why this works, let me know..)


    CSS Howto..

    How to add padding to anchor tags in Top Bar in Foundation 6?

    How to display child elements of
  • at 100% height?
  • How to create HTML5 popup with minimize etc

    How to access smarty variable in css URL attribute?

    How to auto fit input field after dynamically added spans?

    HTML: How to correctly format 4 elements on the same line?

    How can i override this css behavior with jquery?

    How to set css style dynamically with angularjs?

    CSS: How to change colour of active navigation page menu

    Selenium: how to define css if webpage has mutiple elements with same name

    How to make rounded tabs with css? [closed]

    How to apply css background color to text only, in datatables cell

    How can I get a box shadow to start below a thick border?

    How can I make it so the first element in a DIV has a different CSS to others?

    How to add delay in css hover on a div that was displayed none?

    I need a max-margin CSS property, but it doesn't exist. How could I fake it?

    How do I code CSS to “change” when I load/pull content using ajax?

    How to represent x and y in svg symbol

    website div won't stretch from left to right, how do you fix css?

    How to toggle overlay with no body scroll using the same button / div

    How to execute select() method on polymer elements based on URL?

    How to keep curved borders using css 3

    how to currency convert in java script

    How to apply CSS class to a split string

    How can I customize COUNT nodes with css

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    how to set two div's height equal with css

    How to strikethrough empty div

    How can i style textnodes that are direct children of a body-element?

    How to reduce the length of the paragraph by dots(…)?