1 2 Previous Next 24 Replies Latest reply on Dec 29, 2013 9:41 PM by sam_oda

    Vertically center image in web viewer

    chuckburr

      I am using this code to display an image in the web viewer. How would I edit it to vertically center the images. I have played around with table valign middle and background image center center but have not gotten it right. Images are of various sizes.

       

       

      "data:text/html,

       

      <body style='border=0;

      margin-top: 0px;

      margin-left: 0px;'>

       

      <body>

      <img src= ' " & Images::Image URL & " ' width = 100%>

      </body>"

        • 1. Re: Vertically center image in web viewer
          andrekv

          Hi!

           

          As I know there is no way to use any CSS style to make images (or any other elements) centered vertically. Usually (in Web programming) it done by using margin or padding styles.

           

          I can suggest you workaround by using <table> tag with attribute high:100%. Important: all elements that contain <table> also have to have attribute “height:100%” (<body>, <html>, etc.).

           

          And then, just use:

          <tr><td style=”vertical-align:middle”> ...</td></tr>

          or

          <tr><td valign="middle">...</td></tr>.

           

          Yeah, not very elegant solution, but works fine!

          • 2. Re: Vertically center image in web viewer
            beverly

            Chuck, you are specifying the <body tag twice and that's not correct. Perhaps you meant to remove the second one?

             

            To CENTER the image, use this:

            <img style="margin: 0px auto;" ...

            this is the same as '0px auto 0px auto', so that the top and bottom are 0 and the auto puts the same space on either side.

            If your image is the ONLY thing on the page you could put it in the body tag instead and all will be centered.

            Beverly

            • 3. Re: Vertically center image in web viewer
              chuckburr

              hello,

               

              How exactly would the code look. I tried this but with quotes around the value "middle" filemaker tells me that, "The specififed table canot be found". When I take the quotes off, the image is still oriented with the top of the image at the top of the web viewer instead of centered vertically. The image is larger than the web viewer box, that is fine.

               

              "data:text/html,

               

              <body style='border=0;

              margin-top: 0px;

              margin-left: 0px;'>

               

              <body>

              <table>

              <tr><td valign=middle><img src= ' " & Images::Image URL & " ' width = 100%></td>

              </tr>

              </table>

              </body>"

              • 4. Re: Vertically center image in web viewer
                chuckburr

                Hi Beverly, I tried this code and the image is still oriented with its top at the top ov the web viewer. How would I tweak it. Also, the image is the only thing in the page. Thanks Chuck

                 

                "data:text/html,

                 

                <body style='border=0;

                margin-top: 0px;

                margin-left: 0px;'>

                <img style=’margin: 0px auto;’>

                 

                <body>

                 

                        <img src= ' " & Images::Image URL & " ' width = 100% >

                 

                </body>"

                • 5. Re: Vertically center image in web viewer
                  beverly

                  You ignored my warning that you have the body tag more than once. Now you have done the same with the image tag. It appears that you are trying to make the style information appear before the body tag. You did not have the CSS set correctly. You can test the code in a browser and see what errors may be occurring.

                   

                  Try this:

                  "data:text/html,
                  <style>
                  body { border: 0px;
                  margin-top: 0px;
                  margin-left: 0px;
                  }
                  img { margin: 0px auto; width: 100%; }
                  </style>
                  <body>
                  <img src='" & Images::Image URL & "'/>
                  </body>"
                  

                   

                  (hopefully the code did not get munged from email!)

                  Beverly

                  • 6. Re: Vertically center image in web viewer
                    chuckburr

                    Hi Beverly, thanks for your help! The code you sent "img {margin: 0px auto; width: 100%}" does not reduce the image to fit the image into the web viewer box by width. The image is larger than the web viewer box. When I move the width tag back down into the img line it constrains the image to fit the web viewer horizontally but does not center the image in the web viewer vertically, the top of the image is still at the top of the web viewer. I have another question related to horizontal vs. vertical images as well but want to get this down first. Chuck

                     

                    "data:text/html,

                     

                    <style>

                    body {border: 0px;

                    margin-top: 0px;

                    margin-left: 0px;>

                    img {margin: 0px auto; }

                    </style>

                     

                    <body>

                     

                            <img src= ' " & Images::Image URL & " ', width = 100%>

                     

                    </body>"

                    • 7. Re: Vertically center image in web viewer
                      Steve Wright

                      Hi Chuck,

                       

                      Something like this should do the trick.

                       

                       

                      "data:text/html,

                       

                      <style>

                      body {

                                border: 0px;

                                margin-top: 0px;

                                margin-left: 0px;

                      }

                       

                       

                      img.image {

                                position:absolute;

                                height:95px;

                                top:50%;

                                margin-top:-47px;

                                width:98%;

                                left:50%;

                                margin-left:-50%;

                      }

                       

                       

                      </style>

                      <body>

                               <img src= 'https://www.google.co.uk/images/srpr/logo3w.png' class='image'>

                      </body>"

                       

                       

                      Thinks like this are always easier if you can specify the dimensions of the image rather than 100%, especially when it comes to 'vertically' centering things.

                      • 8. Re: Vertically center image in web viewer
                        chuckburr

                        Hi Steve, this solution works for the google logo which is shorter than the web viewer box I am using 3.5 H x 2.75 W. Try making a web viewer that size and use this code. The image I am using is taller than the web viewer box, so its top is top flush with the top of the web viewer. My image sizes will vary randomly. Eventually I need to determine if the image is wider hortizontally or vertically and width or height 100% but lets save that for later. I think a lot of people can use this solution if we get it working.

                         

                        "data:text/html,

                         

                         

                        <style>

                        body {border=0px;

                        margin-top: 0px;

                        margin-left: 0px;}

                         

                         

                        img.image {position:absolute;

                                  height:95px;

                                  top:50%;

                                  margin-top:-47px;

                                  width:98%;

                                  left:50%;

                                  margin-left:-50%;}

                        </style>

                         

                         

                        <body>

                         

                         

                                <img src= http://034ea2b.netsolhost.com/restoration-seeds-76/tomato/tomato/JauneFlamme_IMG_5123.jpg width = 100% >

                         

                         

                        </body>"

                        • 9. Re: Vertically center image in web viewer
                          Steve Wright

                          This should fit the image width wise and center it vertically when appropriate. 

                          "data:text/html,

                          <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"

                          \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

                           

                           

                          <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">

                           

                           

                          <head>

                           

                           

                          <style>

                                    html,body {

                                              overflow:hidden;

                                              margin:0;

                                              padding:0;

                                              width:100%;

                                              height:100%;

                                    }

                                    .imgTable {

                                              height:100%;

                                              width:100% ;

                           

                                    }

                                    .img {

                                              width:100% ;

                           

                                    }

                          </style>

                          </head>

                           

                           

                          <body>

                           

                           

                          <table class='imgTable'>

                                    <tr>

                                    <td valign='middle'>

                                    <img src='"&  Images::Image URL &"' class='img' />

                                    </td>

                                    </tr>

                          </table>

                           

                          </body>

                          </html>"

                           

                           

                          I just noticed andrekv suggested tables.  I tested this with your image and a few others, simply copy and paste.

                          • 10. Re: Vertically center image in web viewer
                            chuckburr

                            Hi Steve, thanks for your thorough response. I still get the image top at the tob of the web viewer instead of vertically aligned centered.

                             

                            We still get this, the top of the image at the top of the viewer and the overflow below, not equally distributed above and below.

                             

                            Screen Shot 2012-11-19 at 9.48.13 PM.png

                             

                            The desired position is with the image vertically centered like this. PS: In the solution you attached, the scroll bars to show overflow were deactiviated, how would be again gain access to them under your solution?

                             

                            Screen Shot 2012-11-19 at 9.52.37 PM.png

                             

                            Cheers, Chuck

                            • 11. Re: Vertically center image in web viewer
                              Steve Wright

                              Hi Chuck,

                               

                              I think (may be wrong) that what you want to achieve cannot be done without knowing the image dimensions.  Since these will be different, I think the answer is Javascript.

                              Im not a javascript pro, but can hack things together ok.   The following works for me and appears to be doing what you need.

                               

                              i.e, Fitting the image within the width, then moving the image so that its center is centered on the screen.

                               

                               

                              "data:text/html,

                               

                              <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"

                              \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

                               

                               

                              <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">

                              <head>

                              <style>

                              body {

                                        border=0px;

                                        margin-top: 0px;

                                        margin-left: 0px;

                              }

                               

                               

                              #myImage {

                                        position:absolute;

                                        width:100%;

                                        left:50%;

                                        margin-left:-50%;

                              }

                              </style>

                               

                               

                              <script type='text/javascript'>

                              function moveImage() {

                                        var actualImage = document.getElementById('myImage');

                                        var curr_height = actualImage.height;

                                        var half_height = curr_height / 2 ;

                                        half_height = '-' + half_height;

                                        actualImage.style.marginTop =  half_height + 'px';

                                        actualImage.style.top =  '50%';

                              }

                               

                               

                              window.onresize =  function() { moveImage() ; }

                              </script> 

                              </head>

                               

                              <body onload='moveImage();'>

                                <img src='"& Images::Image URL &"' id='myImage'  />

                              </body>

                              </html>"

                               

                               

                              The javascript gets the image height, divides by two and then resets the image position by adjusting the margins.

                              The window.onresize is set to run the same function again if the webviewer is resized

                               

                              RE: Scroll bars they where previously hidden using overflow:hidden in the css, I have taken this out, but the problem with centering vertically in such a way is that you can never scroll up to view the top portion of the image.  So you may actually want to hide the scroll bars...

                               

                               

                              If you dont want it to scale the image the following should do it,

                               

                              "data:text/html,

                               

                              <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"

                              \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

                               

                               

                              <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">

                              <head>

                              <style>

                              body {

                                        border=0px;

                                        margin-top: 0px;

                                        margin-left: 0px;

                              }

                               

                               

                              #myImage {

                                        position:absolute;

                              }

                              </style>

                               

                               

                              <script type='text/javascript'>

                              function moveImage() {

                                        var actualImage = document.getElementById('myImage');

                                        var curr_height = actualImage.height;

                                        var half_height = curr_height / 2 ;

                                        half_height = '-' + half_height;

                                        actualImage.style.marginTop =  half_height + 'px';

                                        actualImage.style.top =  '50%';

                               

                                        var curr_width = actualImage.width;

                                        var half_width = curr_width / 2 ;

                                        half_width = '-' + half_width;

                                        actualImage.style.marginLeft =  half_width + 'px';

                                        actualImage.style.left =  '50%';

                              }

                               

                               

                              window.onresize =  function() { moveImage() ; }

                              </script>

                              </head>

                               

                              <body onload='moveImage();'>

                                <img src='"& Images::Image URL &"' id='myImage'  />

                              </body>

                              </html>"

                               

                               

                              • 12. Re: Vertically center image in web viewer
                                beverly

                                Chuck, add this to the CSS for the image

                                     vertical-align: middle;

                                 

                                resources:

                                 

                                http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

                                http://www.maxdesign.com.au/articles/vertical-align/

                                • 13. Re: Vertically center image in web viewer
                                  Steve Wright

                                  Hi Beverly,

                                   

                                  I dont believe that is what Chuck is trying to achieve, at least not going by the previous post (quoted below)  which is focusing on the center of the image.   Aligning it middle of the webviewer would have no effect if the image was too tall for the webviewer.

                                   

                                  The javascript code above produces the same effect as the screenshot below (tested), except you cannot scroll up to view the clipped content.

                                  I guess if this is also a requirement and Chuck doesnt mind javascript then theres also the possibility of using something like document.scrollTo(x,y) function rather than messing with the actual positioning.

                                   

                                  The desired position is with the image vertically centered like this. PS: In the solution you attached, the scroll bars to show overflow were deactiviated, how would be again gain access to them under your solution?

                                   

                                  Screen Shot 2012-11-19 at 9.52.37 PM.png

                                  • 14. Re: Vertically center image in web viewer
                                    beverly

                                    Yeah, his posts were a little confusing to me!

                                     

                                    Pure CSS should work without the need for a table, though.

                                    Beverly

                                    1 2 Previous Next