JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<body>
    <ul>
        <li>item 1 is boring</li>
        <li>item 2 is a very long item indeed, oh yes it is  middle char should be in center of page</li>
        <li>item 3 is almost as boring as item 1</li>
        <li>but item4 is friggin' awesome!</li>
    </ul>
</body>

CSS

ul {
    float: left;
    position: relative;
    left: 50%;
}
li {
    float: left;
    position: relative;
    left: -50%;
    font-size: 0.5em;
    clear: left;
}