CODEWITHSUNDEEP
cssinternet-explorer-7centering
DanC
DanC

Reputation: 1307

IE7 Vertical & Horizontal Image Centering

I'm attempting to centre align an image both vertically and horizontally within a fixed height and width . The code I have works fine in FF, Chrome, Safari and IE8+ but not IE7 and I cannot for the life of me find a work around.

At the moment the images can be of varied heights and widths, although if I cannot find a good fix I guess I can be more strict of the height and fall back on tried and tested centering techniques.

Live example is at jsfiddle

Anyone any bright ideas?

Upvotes: 1

Views: 2519

Answers (2)

Web_Designer
Web_Designer

Reputation: 74610

Because <img> elements are display: inline; by default we can center them just like we would text:

a {
    height: 180px;
    width: 150px;
    display: block;
    text-align: center;
    border: 1px solid black;
    margin: 10px;
    line-height: 180px;
}
a img {
    vertical-align: middle;
}

jsFiddle Demo

Upvotes: 3

user983716
user983716

Reputation: 2082

I had this ugly problem before and I resolve it as follow. The idea is to but the image using css as background image. I think/hope it works in ie7.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <style type="text/css">
            #wm_splash{
                position: absolute;
                top: 0;
                left: 0;
            }

            #wm_splash_loading {
                background-image: url('images/loading.gif'); /* the loading image (animated gif)*/
                height: 80px;                                     /* loading image height */
                width: 285px;                                     /* loading image width*/
                padding: 0px 0 0 0px;
                text-align: center;
            }
       </style>
       <title>Loading...</title>
    </head>

    <body>

        <div id = "wm_splash" style = "width : 100% ; height : 100%">
            <table width = "100%" height = "100%" >
                <tbody>
                    <tr>
                        <td width = "100%" height = "100%" align = "center" valign = "middle">
                            <div id = "wm_splash_loading"> loading... </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>      
    </body>
</html>

Upvotes: -1

Related Questions