2 Replies Latest reply on Oct 25, 2013 5:48 AM by sunziman

    Keep image(logo) centred to page

    mattpearce_designer

      Hello,

       

      I'm trying to centre an image to the centre of the browser using the responsive settings. My problem is that I can centre the image, but as soon as I start to scale upwards or downwards the Logo isn't staying in the middle of the browser. I've attached 2 images to explain my issue.

       

      Thanks in advance for your help

       

      Matt1.jpg

        • 1. Re: Keep image(logo) centred to page
          robboerman Level 4

          Use edgehero.js to center

          or just use css on it: margin:auto;

           

          - Rob

          1 person found this helpful
          • 2. Re: Keep image(logo) centred to page
            sunziman

            I'm also trying to center elements, exactly as described. I have the same issue, the elements do not really stay in the center once the viewport gets smaller.

             

            I'm trying this code on my stage under compositionReady:

            sym.$("box").css("margin","auto");

             

            The box does not center itself, it just stands there fixed.

             

            Edit: I understood now how smaller images can be placed in the center of a bigger stage:

                 - place image in stage

                 - set image to background fixed via the responsive layout button

                 - scale image container size to 100%

                 - place image in the center of the comp

                 image stays in the center. The problem in my case is, this image is a button, and now the entire box is clickable, not just the button part.

             

            Now how would that work with a number of elements that are not images? I have a button that is made up of a base rectangle, some text and arrow graphic. There is no obvious way to group and position this group in the center of a larger comp.

             

            Edit2: OK I figured out how to group and center elements:

                 - combine elements into symbol

                 - name the symbol button

                 - use this css code on the stage:

             

            sym.$("button").css({

            "margin": "0 auto",

            "width": "200px",

            "position": "relative",

            "top": "368px",

            "left": "0px"

            });

             

            Of course your positions might vary, for me these worked.

            1 person found this helpful