CODEWITHSUNDEEP
htmlcssimagefirefoxvertical-alignment
Bastien Valentin
Bastien Valentin

Reputation: 45

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.

Upvotes: 0

Views: 2165

Answers (5)

Chris Halcrow
Chris Halcrow

Reputation: 31950

It's just:

background-position: center;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Upvotes: 0

hungerstar
hungerstar

Reputation: 21685

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>

Upvotes: 1

Ben Humphries
Ben Humphries

Reputation: 49

put the img inside a div and then give the div a class of banner

set the banner width to 100% and the the image to width 100% so it fills the div container for the banner

html:

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

css: 

   .banner{
     width:100%;
     margin:0 auto;
    }

   .banner img{
    width:100%;
    }

Upvotes: 0

Manju
Manju

Reputation: 765

can you the fallowing code,this might be useful

    div {position:relative;}
    img {position:absolute;top:0;bottom:0;margin:auto;}
    .image {min-height:50px}

if it not works,please check this link

thank you,

Upvotes: 0

PaulProgrammer
PaulProgrammer

Reputation: 17630

from: http://www.w3.org/Style/Examples/007/center.en.html

CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

The example below centers a paragraph inside a block that has a certain given height. A separate example shows a paragraph that is centered vertically in the browser window, because it is inside a block that is absolutely positioned and as tall as the window.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

Example with image here

Upvotes: 0

Related Questions