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 place text over different images with different positions?

    How to move/position DIV container by changing CSS values using Javascript?

    How to add CSS class dynamically to html element

    How to create a pure CSS tooltip with HTML content for inline elements

    How to change 'inherited' font families using the CSS style sheet

    How can I apply a css transition to an element when its parent is hovered?

    How can my css div with the display flex property be alignd to the right when it's wrapping?

    Div is laying ontop of absolute-positioned element. How to put element above the div?

    How to use pure CSS to show an animation of one element's background and color property?

    How to generate CSS color in proportion to value?

    How to center the pagination in jQuery Bootstrap DataTables plugin?

    How to create a responsive sprite sheet animation in css?

    how to access the class css properties from an attribute directive associated with the same element

    How can I set a default pseudo styles in my css?

    How to color the first word using CSS

    How to make hover buttons?

    In GWT, how to reference an external (obfuscated) CSS in another CSS file

    How to conditionally resize image if screen not wide enough, with CSS?

    How Do I Make My CSS Slider Auto Play? [closed]

    How can I get the
    div to properly wrap my two buttons?

    CSS question: How to fix several rendering issues on http://www.fareham.ac.uk

    How to position div underneath dynamic ul

    How to transform a production to LL(1) for a list separated by a semicolon?

    How does calc() CSS property degrade in older browser

    How to align HTML elements from bottom to top?

    How to reduce size of a text with police roboto on a small scren

    javafx ImageView how to use css hover

    How to force a hover state with jQuery?

    how to add a border-radius css curl

    How do I remove a specific bullet point within a ul in CSS?