JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

Move up and down

<div class="imageContainer">
    <span><span>PLEASE ALIGN ME TO THE CENTER</span></span>
</div>

CSS

body {
    margin: 0 50px;
}
.imageContainer {
    border: 1px solid #444;
    overflow: hidden;
    width: 300px;
    margin: 15px;
    text-align: center;
    font-size: 24px;
}
.imageContainer > span {
    display: block;
    width: 10000px;
    margin-left: -4850px; /* -(width-container width)/2 */
}
.imageContainer > span > span {
    display: inline-block;
}

JavaScript

$('html').mousemove(function(e) {
    $('.imageContainer').css('font-size',e.pageY);
});