JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<div style="display: flex; align-items: center;height: 200px;background-color: yellow;">
aaaa

</div>

<div id="sample">
<div><span class="rei">例</span><span class="oya">Example.<span class="sample1">baseline</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample2">top</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample3">middle</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample4">bottom</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample5">text-top</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample6">text-bottom</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample7">super</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample8">sub</span></span></div>
</div>


<div style="font-size:30px;vertical-align:middle;">
  hogejjj
  <div style="display: inline-block;font-size:10px;">
  fugajjj
  </div>
</div>
<div style="height:100px; width:200px;background-color: green;vertical-align: middle;">
<span style="vertial-align: moddle;">
hoge
</span>

</div>

<div><span class="rei">例</span><span class="oya">Example.<span class="sample3">middle</span></span></div>

CSS

#sample div {background-color:#ccccff; margin:4px;}
.rei {font-size:60px;}
.oya {font-size:30px; background-color:#ccffcc;}
.sample1 {font-size:12px; background-color:#ffccff; vertical-align:baseline;}
.sample2 {font-size:12px; background-color:#ffccff; vertical-align:top;}
.sample3 {font-size:12px; background-color:#ffccff; vertical-align:middle;}
.sample4 {font-size:12px; background-color:#ffccff; vertical-align:bottom;}
.sample5 {font-size:12px; background-color:#ffccff; vertical-align:text-top;}
.sample6 {font-size:12px; background-color:#ffccff; vertical-align:text-bottom;}
.sample7 {font-size:12px; background-color:#ffccff; vertical-align:super;}
.sample8 {font-size:12px; background-color:#ffccff; vertical-align:sub;}