25 lines
915 B
HTML
25 lines
915 B
HTML
<!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>
|