How to vertically center an image?

I'd like to vertically center an image within a div.  I am using the HTML below but with no luck.  What am i doing wrong?
<div style="float:left; height:50%; margin-bottom:-250px;"></div>
            <div style="position:relative;left:20px;clear:both; height:500px;">
                <img alt="logo" src="images/logo.png" />
            </div>

Open in new window

abemiesterAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
DaydreamsConnect With a Mentor Commented:
Use the background-position property:

http://www.w3schools.com/css/pr_background-position.asp
0
 
JagarmTechnical Support AnalystCommented:
use:

      vertical-align:middle;
0
 
abemiesterAuthor Commented:
That doesn't work either
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
lharrispvCommented:
what about margin:0 auto; text-align:center; or perhaps the same but with a fixed width
0
 
sscottiCommented:
Look at this and see if this helps:

http://www.dynamicsitesolutions.com/css/vertically-centering-with-line-height/

You should be able to center text, images and in-line elements using line-height.
0
 
sscottiCommented:
BTW,  the DOCTYPE needs to be specified as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

in order for line-height and vertical-align:middle to work.

0
 
Nati4jcCommented:
i just put the image in a table and it works fine in FF, IE6, Opera and Safari:

<div style="float:left; height:50%; margin-bottom:-250px;"></div>
            <div id="div" style="position:relative;left:20px;clear:both; height:500px; background-color:#FF3300;">
             <table width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td valign="middle">   <img src="images/logo.png" alt="logo" name="image" id="image" />   </td></tr></table>         </div>
0
 
DaydreamsCommented:
Hi abemiester, I'm glad my solution helped. I wonder why the B grade? If you needed any additional help I would have been happy to give you additional assistance.

About grading and the opportunity to answer your needs: http://www.experts-exchange.com/help.jsp?hi=403

You can change the grade by clicking the "request attention" button: http://www.experts-exchange.com/help.jsp?hi=404

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.