<ruby>
  青花魚<rt>さば</tr>
</ruby>
<ruby>
  青花魚<rt class="left">さば</tr>
</ruby>
<ruby>
  青花魚<rt class="center">さば</tr>
</ruby>
<ruby>
  青花魚<rt class="right">さば</tr>
</ruby>
ruby{
  display:block;
}

ruby + ruby{
  margin-top:30px;
}

.left{
  text-align:left;
}

.center{
  text-align:center;
}

.right{
  text-align:right;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.