styling/ruby-position-inline/text-align-4.html

<!DOCTYPE HTML>
<title>ruby-positon: inline and text-align</title>
<style>
ruby {
  ruby-position: inline;
  display: inline;
  position: relative;
}
.rb {
  display: block;
  border: thin yellow dashed;
  width: 20em;
}
rt {
  display: block;
  position: absolute;
  top: 5em;
  left: 0;
  right: 0;
  border: thin blue dotted;
  text-align: center;
}
</style>
<p><ruby><span class=rb>xxxxxxxxxxx</span><rt>yyyyy</rt></ruby>
1	wakaba	1.1	<!DOCTYPE HTML>
2			<title>ruby-positon: inline and text-align</title>
3			<style>
4			ruby {
5			ruby-position: inline;
6			display: inline;
7			position: relative;
8			}
9			.rb {
10			display: block;
11			border: thin yellow dashed;
12			width: 20em;
13			}
14			rt {
15			display: block;
16			position: absolute;
17			top: 5em;
18			left: 0;
19			right: 0;
20			border: thin blue dotted;
21			text-align: center;
22			}
23			</style>
24			<p><ruby><span class=rb>xxxxxxxxxxx</span><rt>yyyyy</rt></ruby>