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	<!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>