Home/ Questions/Q 6036995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T06:00:29+00:00

I need to create a clickable div with an image (of variable size, but

  • 0

I need to create a clickable div with an image (of variable size, but that is smaller than the div) centered both horizontally and vertically within the div.

I made the div clickable with

    #image-box a { display: block; height: 100%; width: 100%; }

but can’t seem to center the image vertically.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this adjusting width and height of your a element as explained in the comments:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centered Clickable Image</title>
    <style type="text/css" media="screen">
    #image-box {
            position:absolute; 
            top:0; bottom:0; left:0; right:0;
            margin:auto; 
            border: 1px solid #999;
            text-align: center;
            }

    #image-box a {display:block; position:absolute; 
            top:0; bottom:0; left:0; right:0;
            margin:auto; text-align: center;
            }

    /* insert the same width and height of your-nice-img.png */
    #image-box a {width:339px; height:472px; border: 2px solid red;}
</style>
</head>
<body>    
    <div id="image-box">
        <a href="#">
            <img src="your-nice-image.png" alt="image to center"/>
        </a>
    </div>
</body>
</html>

    NOTES:
    Borders are needed only for visual debug, You can delete them at any time.

    The trick here is that you use an absolute positioned div (#image-box) with a fixed width and height.

    If you set the #image-box a top and bottom position to zero the rule margin:auto puts #image-box a element in a middle position (on the vertical axis) because it has a fixed height, .

    If you can or like to solve It using jQuery, try this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centered Image</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    </head>
    <body>
        <div id="image-box">
            <a href="#">
                <img src="canning.png" alt="image to center"/>
            </a>
        </div>

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $(window).resize(function(){
            $('#image-box a').css({
                position:'absolute',
                left: ($(window).width() - $('#image-box a img').outerWidth())/2,
                top: ($(window).height() - $('#image-box a img').outerHeight())/2
            });
        });
            // first run
        $(window).resize();
    });
    </script>
    </body>
    </html>
    • 0