您的位置：首页 > Web前端 > > 正文

css3语法结构（CSS3中的注音对齐属性ruby-align用法指南）

更多 时间：2022-01-15 01:48:29 类别：Web前端 浏览量：251

css3语法结构

CSS3中的注音对齐属性ruby-align用法指南

语法：
 
ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge
 
参数：
 
auto : 　由浏览器确定对齐方式。对于ideographic（东亚文本）以distribute-space值对齐。对于Latin文本以center值对齐
left : 　根据基本宽度左对齐
center : 　根据基本宽度居中对齐。如果基本宽度小于ruby文本的宽度，那么在ruby文本的宽度中居中基本宽度
right : 　根据基本宽度右对齐
distribute-letter : 　如果ruby文本的宽度小于基本宽度，则ruby文本在基本宽度中均匀分布。如果ruby文本的宽度大于或等于基本宽度，居中对齐
distribute-space : 　如果ruby文本的宽度小于基本宽度，则ruby文本在基本宽度中均匀分布。在ruby文本中，在第一个字符的前面后最后字符的后面有半个字距的空白区域。如果ruby文本的宽度大于或等于基本宽度，居中对齐
line-edge : 　如果ruby文本不相邻行边缘，则其被居中。否则ruby文本行在基本文本边的上方

实例代码：

  • CSS Code复制内容到剪贴板
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    2. <html xmlns="http://www.w3.org/1999/xhtml">   
    3. <head>   
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    5. <title> ruby-align </title>   
    6. <style>   
    7. ruby.sample1 {ruby-align:auto;}   
    8. ruby.sample2 {ruby-align:start;}   
    9. ruby.sample3 {ruby-align:left;}   
    10. ruby.sample4 {ruby-align:center;}   
    11. ruby.sample5 {ruby-align:end;}   
    12. ruby.sample6 {ruby-align:rightright;}   
    13. ruby.sample7 {ruby-align:distribute-letter;}   
    14. ruby.sample8 {ruby-align:distribute-space;}   
    15. ruby.sample9 {ruby-align:line-edge;}   
    16. ruby {background-color:pink;}   
    17. rt {background-color:yellow;}    
    18. </style>   
    19.     
    20. </head>   
    21.     
    22. <body>   
    23. <p><ruby class="sample1">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:auto;）</p>   
    24. <p><ruby class="sample2">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:start;）</p>   
    25. <p><ruby class="sample3">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:left;）</p>   
    26. <p><ruby class="sample4">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:center;）</p>   
    27. <p><ruby class="sample5">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:end;）</p>   
    28. <p><ruby class="sample6">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:rightright;）</p>   
    29. <p><ruby class="sample7">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:distribute-letter;）</p>   
    30. <p><ruby class="sample8">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:distribute-space;）</p>   
    31. <p><ruby class="sample9">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>（ruby-align:line-edge;）</p>   
    32. </body>   
    33. </html>  

    • 实例图
    css3语法结构（CSS3中的注音对齐属性ruby-align用法指南）

    标签：ruby-align 注音 CSS3
  • 上一篇：python读取word的表格（Python使用reportlab模块生成PDF格式的文档）
  • 下一篇：mysql如何解决主从延迟（MySQL主从延迟问题解决）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利