Alex Rivera | Logout

Need to center image in web page via CSS

Asked 2010-03-23T17:36:05.417
11

I'd like to center an image in a page both vertically and horizontally even when the browser is resized.

Currently, I use this CSS:

.centeredImage {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -150px;
}

And this HTML:

<img class="centeredImage" src="images/logo.png">

It centers in FF but not IE (image center is placed at upper left corner). Any ideas?

-Robot

css image center
Edit
Report

3 Answers

7

Try using this :

position: absolute
answered 2010-03-23T17:40:07.987
2

This is a tricky way, but it works:

CSS:

html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}

HTML:

<html>
<body>
   <table id="wrapper">
      <tr>
         <td><img src="my_cool_image.png" alt="hello world" /></td>
      </tr>
   </table>
</body>
</html>
answered 2012-03-20T04:51:03.120
0

clear: both; margin: auto;

answered 2010-03-23T18:16:23.923

Your Answer