JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Zentai">
    <ul>
        <li><a>あああああああああああああああああああああ</a>
        </li>
        <li><a>いいいいいいいいいいいい</a>
        </li>
        <li><a>ううう</a>
        </li>
    </ul>
</div>

CSS

/* 
>> 初心者でもすぐ使える！CSSを使った中央寄せの方法まとめ８＋α | 株式会社Bark to Imagine http://barktoimagine.com/web/css/1653　
>> div内で下揃え - CSSブログ～ホームページ制作会社 gravity works（グラビティ・ワークス）のCSSについての知識と備忘録 http://www.gravity-works.jp/css_blog/2009/08/div.html
>> bottom 【下からの配置位置】 - digilog.CSS http://digilog.client.jp/css/bottom-position.html
*/

/* 回答群全体にかかるstyle*/
 div#Zentai {
    position: absolute;
    width: 500px;
    /*　★★ここが変化しなくなった　*/
    left: 0;
    /*　全画面を対象にして左寄せ　*/
    bottom: 50px;
    /*　下からの配置位置全画面から回答群までの距離　*/
    display:table;
    /*　★今回のみそ　まずテーブルを作成*/
    border-collapse: separate;
    border-spacing: 3px;
    /*お好きな余白サイズに*/
     /*★★できれば全体に対して要素を引いた分の余りを均等に配分したいのですがautoが使えませんでした。*/
}
/*回答の各要素にかかっている*/
 ul li {
    width: 100px;
    /*　各回答の横幅　*/
    /*margin: 0 auto;　どれだけ値を変更しても変化しないのは、テーブルにmarginが使えなかったから*/
    text-align: left;
    /*　左寄せ　*/
    position: relative;
    /*　★今回のみそ　これがないと効かないらしい　http://ideahacker.net/2015/02/14/9779/*/
    font-size: 1.2em;
    line-height: 1.2em;
    font-weight: bold;
    height: 135px;
    /*    ここが今回の修正依頼の箇所　*/
    display: table-cell;
    /*　★今回のみそ　*/
    vertical-align: middle;
    /*　★今回のみそ　上下センタリング*/
    /*　なくてもいい
     top: 0;
     bottom: 0;
     */
    /*
     padding:10px;　元のは、40px 30px;　
     */
    font-family:'Lato', sans-serif;
    background-color: #fff;
    border-radius: px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    border: 2px solid #AAAAA6;
    color: #000;
}

JavaScript

$('li').click(function () {
    alert($(this).width());
});