JSFiddle - React, Tailwind, and code Playground

HTML

<div align="center">
   A centered div
   <p>A</p>
   <table border="1">
     <tr><td>centered</td><tr>
     <tr><td>div</td><tr>
   </table>
   <ul><li>A centered div</li></ul>
</div>
<hr>
<div align="center">
   A centered div
   <p>A</p>
   <table border="1">
     <tr><td class="align-left">centered</td><tr>
     <tr><td class="align-right">div</td><tr>
   </table>
   <ul><li>A centered div</li></ul>
</div>

CSS

div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }