| <!DOCTYPE> |
| <html> |
| <span id="align-vw">This is 2vw vertical-aligned</span> |
| <span id="align-vh">This is -3vh vertical-aligned</span> |
| <span id="align-vmin">This is 5vmin vertical-aligned</span> |
| <span>This does not have vertical-align property set</span> |
| <script> |
| function applyStyle() { |
| var viewportWidth = window.innerWidth; |
| var viewportHeight = window.innerHeight; |
| var viewportMinLength = Math.min(viewportWidth, viewportHeight); |
| |
| var elementStyle = document.getElementById("align-vw").style; |
| elementStyle.verticalAlign = Math.floor(2 * viewportWidth / 100) + "px"; |
| |
| var elementStyle = document.getElementById("align-vh").style; |
| elementStyle.verticalAlign = Math.floor(-3 * viewportHeight / 100) + "px"; |
| |
| var elementStyle = document.getElementById("align-vmin").style; |
| elementStyle.verticalAlign = Math.floor(5 * viewportMinLength / 100) + "px"; |
| } |
| applyStyle(); |
| </script> |
| </html> |
