如何将 <ruby> 元素与常规文本垂直对齐

Question

有没有办法将

<ruby>

元素与常规文本的底部垂直对齐？

这是我的CSS和代码：

body {
  font-family:"Times New Roman";
  }
ruby {
  font-family:"Times New Roman";
    display: inline-flex;
    flex-direction: column-reverse ;
    align-items: center;
  }
rt {
  font-family:"Arial Narrow";
  }

Mat 1:1 <RUBY><ruby><ruby>Βίβλος<rt>βίβλος</rt></ruby><rt>[The] book</rt></ruby><rt>N-NSF</rt></RUBY> <RUBY><ruby><ruby>γενέσεως<rt>γένεσις</rt></ruby><rt>of [the] genealogy</rt></ruby><rt>N-GSF</rt></RUBY> <RUBY><ruby><ruby>Ἰησοῦ<rt>Ἰησοῦς</rt></ruby><rt>of Jesus</rt></ruby><rt>N-GSM</rt></RUBY> <RUBY><ruby><ruby>Χριστοῦ<rt>Χριστός</rt></ruby><rt>Christ</rt></ruby><rt>N-GSM</rt></RUBY> 

结果：

我尝试过

display: inline-block

，但是

<ruby>

元素的垂直顺序不合适。

Answer 1

To vertically align the <ruby> elements with the bottom of regular text, you can use a combination of CSS properties to control their display and alignment. It's important to note that vertical alignment in CSS can sometimes be a bit tricky due to variations in browser rendering, so you might need to adjust these styles to suit your specific needs.

Based on your provided code, here's an example of how you could modify the CSS to achieve the desired vertical alignment:

body {
  font-family: "Times New Roman";
}

ruby {
  font-family: "Times New Roman";
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

rt {
  font-family: "Arial Narrow";
  align-self: flex-end; /* Align the <rt> element to the bottom of <ruby> */
}


Here's how your provided HTML would look with the updated CSS:

<p>
  <ruby>
    <ruby>Βίβλος<rt>βίβλος</rt></ruby><rt>[The] book</rt>
  </ruby>
  <ruby>
    <ruby>γενέσεως<rt>γένεσις</rt></ruby><rt>of [the] genealogy</rt>
  </ruby>
  <ruby>
    <ruby>Ἰησοῦ<rt>Ἰησοῦς</rt></ruby><rt>of Jesus</rt>
  </ruby>
  <ruby>
    <ruby>Χριστοῦ<rt>Χριστός</rt></ruby><rt>Christ</rt>
  </ruby>
</p>