javascript - 将图像放置在屏幕中间

Question

您好，有人可以告诉我如何使用 JavaScript 将图像放置在屏幕中央吗？

我能得到屏幕高度并除以2吗？我如何获得屏幕高度？

谢谢!

Answer 1

确实，CSS 是实现此目的的最佳方法(根据 Sebastián 的回答)，如果您必须使用 JS，那么请使用 jQuery。不过，您需要一个 JavaScript 解决方案，因此您可以在下面找到一个解决方案。

实际上，我认为 js 必要的唯一两个原因是:

1. 如果图像因用户交互而居中或
2. 如果图像必须居中一次，然后应保持静态(而不是像 CSS 解决方案那样保持居中)。

无论如何......享受:

用法:

imgToMiddle('imageid');

请注意，“imageid”是您要放置在屏幕中心的图像的 ID。该函数修改图像的 css 属性以将其放置在屏幕中间。

代码:

    //viewport width/height code from here: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

    function imgToMiddle(imgid){
        function viewportWidth(){
            var viewportwidth;

            if (typeof window.innerWidth != 'undefined'){
              viewportwidth = window.innerWidth;
            }

            else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
               viewportwidth = document.documentElement.clientWidth;
            }
            else{
               viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
            }
            return viewportwidth;
        }

        function viewportHeight(){
            var viewportheight;

            if (typeof window.innerWidth != 'undefined'){
              viewportheight = window.innerHeight;
            }

            else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
               viewportheight = document.documentElement.clientHeight;
            }
            else{
               viewportheight = document.getElementsByTagName('body')[0].clientHeight;
            }
            return viewportheight;
        }
        var img=document.getElementById(imgid);

        img.style.position="absolute";
        img.style.left=viewportWidth()/2-img.width/2;
        img.style.top=viewportHeight()/2-img.height/2;
    }