[wplug] centering an image?

Wed Feb 25 18:03:07 EST 2009

On Wed, Feb 25, 2009 at 4:56 PM, Zach Uram <netrek at gmail.com> wrote:

> I'm having trouble getting an image centered, it is centered
> horizontally but not vertically. I would like the image on my website
> to be centered vertically and horizontally:
> http:// www.jesujuva.org
>
> Zach
> _______________________________________________
> wplug mailing list
> wplug at wplug.org
> http://www.wplug.org/mailman/listinfo/wplug
>

Unfortunately, there isn't a really easy way to do it.  However, there are
some hacks you can do with jquery and javascript to reposition the image
when the page loads or changes size.  This code should work for you:

<html>
<head>
    <script type="text/javascript" src="
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    function resize() {
        var sidemargin = ($(window).width() - $("#testimg").width())/2;
        var topmargin = ($(window).height() - $("#testimg").height())/2;
        $("#testimg").css("margin", topmargin + " " + sidemargin + " " +
topmargin + " " + sidemargin);
    }
    $(document).ready(function(){resize();});
    $(window).resize(function(){resize();});
    </script>
</head>
<body style="overflow: hidden; margin:0px; padding: 0px;">
    <img id="testimg" src="YOURIMAGENAME.jpg"/>
</body>

You need the overflow: hidden on the body or you'll get scroll bars.  Since
you're doing a splash page, it shouldn't be a problem.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.wplug.org/pipermail/wplug/attachments/20090225/9352a95a/attachment.html 