Search code examples
htmlcssimagefirefoxvertical-alignment

Vertically center an image using CSS on firefox

I want to display a banner in the vertical middle of my page using HTML/CSS but I have not be able to do it so far.The image is always on top of my window.

Here is my HTML code:

<head>
    <title>Bo-bee</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
        <img class="banner" src="./res/pictures/logo-bee.png" alt="bobee banner"/>
</body>

And here is my CSS code:

html, body{
    height:100%;
}

.banner{
    width:100%;
}
img{
    vertical-align: middle;

}

Am I doing something wrong? Note: I'm using firefox 22.0. Kind regargs.

Solution

  • vertical-align is used for inline or table-cell elements, https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.

    So let's use the CSS display property values of table and table-cell. display: table; needs to be applied to the parent element for display: table-cell to work. http://caniuse.com/css-table

    http://jsfiddle.net/uhqMw/1/

    CSS

    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body {
     display: table;
     background-color: blue;
}
.banner {
     display: table-cell;
     vertical-align: middle;
}
img {
     width: 100%;
}

    HTML

    <div class="banner">
    <img src="http://lorempixel.com/300/100/" />
</div>