View Single Post
Old 07-27-2018, 12:09 PM   #25
Land_Outcast
Enthusiast
Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!Land_Outcast rocks like Gibraltar!
 
Posts: 43
Karma: 100000
Join Date: Jun 2018
Device: none
I'll try Ankhs' code,* but also, I found a nice simple way to center vertically and horizontally without SVG:

Essentially I create a div of the same size as the viewport (might need to reduce it to 95vh to avoid displacement caused by renderer's compulsory margins).

As of 2018, ADE still doesn't support vertical-align:middle.

Code:
  <!DOCTYPE html>
  <html>
  <head>
  <style>
  img {
      display: inline-block;
      vertical-align: middle;
      max-width: 100%;
      max-height: 100vh;
  }
  p.Vertical {
  text-align: center;
  line-height: 100vh;
  }
  div.Vertical {
  height:100vh;
  width:100vw;
  }
  body {margin: 0}
  </style>
  </head>

  <body>
  <div>
  <p class="ex">
  <img src="paris.jpg" alt="Paris">
  </p>
  </div>

  </body>

  </html>
*Actually, itīs no good for images which resize with the text, given that you canīt imput the "margin correction".

Last edited by Land_Outcast; 07-27-2018 at 02:48 PM.
Land_Outcast is offline   Reply With Quote