JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<div class="event center-parent">
    <a href="#">
        <img src="http://placehold.it/325x200&text=test+image">
        <div class="inner center-y-event center-child">
            <p class="test-class">
                Test
            </p>
        </div>
    </a>
</div>

CSS

.event {
    /* position:relative; */
}
.inner {
    /*  position:absolute; */
    /* top:0; */
}
p {
    margin:0;
}

JavaScript

// var marker = "->";
    // var marginFix = $('.marginFix').css('font-size');
    // var childHeight = "";
    
    // var fixTop  = ($target.outerHeight(true)/2)-($header.outerHeight(true)/2);
    
    var $targetParent = $('.center-parent');
    var $target = $('.center-child');

    $("p").css("color", "red");
    $('.center-parent').css('position','relative');
    $('.center-child').css('position','absolute');
    $('.center-child').css('top','0');



// Later, test wrapping the entire thing in a div with a red background.
// give it strange dimensions and then 
// have it center to that parent instead.



// Maybe use .addclass and .toggleclass
// for applying css instead