Solved

How to vertically center an image?

Posted on 2009-06-30
10
328 Views
Last Modified: 2012-05-07
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

0
Comment
Question by:abemiester
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 5

Expert Comment

by:Jagarm
ID: 24749948
use:

      vertical-align:middle;
0
 

Author Comment

by:abemiester
ID: 24749957
That doesn't work either
0
 
LVL 8

Expert Comment

by:lharrispv
ID: 24750124
what about margin:0 auto; text-align:center; or perhaps the same but with a fixed width
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 15

Accepted Solution

by:
Daydreams earned 500 total points
ID: 24750412
Use the background-position property:

http://www.w3schools.com/css/pr_background-position.asp
0
 
LVL 5

Expert Comment

by:sscotti
ID: 24750637
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
 
LVL 5

Expert Comment

by:sscotti
ID: 24778364
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
 
LVL 1

Expert Comment

by:Nati4jc
ID: 24781650
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
 
LVL 15

Expert Comment

by:Daydreams
ID: 24940670
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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question