freeCodeCamp/guide/chinese/typography/alignment/index.md

2.0 KiB
Raw Blame History

title localeTitle
Alignment 对准

对准

排版对齐会更改文档中的文本流。设计师可以使用这个功能强大的工具,通过提供视觉形式和上下文来巧妙地增强文本的呈现。

尝试对齐以找到令人兴奋的新视觉组合,使您的内容脱颖而出。请务必测试不同设备和浏览器上的对齐错误。

尽可能使用CSS来对齐文本。您可能会遇到HTML对齐标记例如 <p align="right"></p><center></center> 但它们在HTML 5中已弃用。

左对齐文本

默认, text-align: left;

如有疑问,默认的文本对齐通常是最佳选择。特别是对于文章或长文本块,左对齐文本最容易阅读,因为右边的参差不齐的边缘提供了视觉上下文,以帮助读者保持他们的位置,因为他们的眼睛从一行到另一行。

用来:

  • 主体
  • 绝大部分都是

右对齐文本

text-align: right;

右对齐,左边粗糙的文本可以作为视觉香料使用,但是在长期阅读中比左对齐文本更难阅读。

可用于:

  • 标题
  • 导航
  • 侧边栏
  • 语录

居中文本

text-align: center;

使用居中的文本将读者的眼睛拉到重点(例如,标题,页面标题,页脚)。不要将居中文本用于长文本块,因为阅读非常耗费精力。

可用于:

  • 标题
  • 页面标题
  • 导航
  • 侧边栏
  • 标题
  • 语录
  • 页脚

正当的文本

text-align: justify;

对于正文来说,完全对齐的文本很难推荐,因为某些行中的单词之间可能会出现大的间隙。然而,熟练的设计师可以很好地利用它。

可用于:

  • 标题
  • 图片的标题说明

更多信息: