The ruby-align property can be used on any element to control the text alignment of the ruby text and ruby base contents relative to each other.

  • Initial valueauto
  • Applies toAll elements and generated content
  • InheritedYes
  • MediaVisual
  • Computed valueSpecified value (except for initial and inherit)
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript
Formal syntax: start | center | space-between | space-around

ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;
  • startThe ruby content is aligned with the start edge of its box.
  • centerThe ruby content is centered within its box.
  • space-betweenThe ruby content expands as defined for normal text justification, except that if there are no expansion opportunities the content is centered.
  • space-aroundAs for 'space-between' except that there exists an extra expansion opportunity whose space is distributed half before and half after the ruby content.
.class {
   ruby-align: right ; 

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.