68 lines
2.0 KiB
Markdown
68 lines
2.0 KiB
Markdown
|
---
|
|||
|
|
title: Alignment
|
|||
|
|
localeTitle: 对准
|
|||
|
|
---
|
|||
|
|
## 对准
|
|||
|
|
|
|||
|
|
排版对齐会更改文档中的文本流。设计师可以使用这个功能强大的工具，通过提供视觉形式和上下文来巧妙地增强文本的呈现。
|
|||
|
|
|
|||
|
|
尝试对齐以找到令人兴奋的新视觉组合，使您的内容脱颖而出。请务必测试不同设备和浏览器上的对齐错误。
|
|||
|
|
|
|||
|
|
尽可能使用CSS来对齐文本。您可能会遇到HTML对齐标记（例如， `<p align="right"></p>`或`<center></center>` ），但它们在HTML 5中已弃用。
|
|||
|
|
|
|||
|
|
### 左对齐文本
|
|||
|
|
|
|||
|
|
默认， `text-align: left;`
|
|||
|
|
|
|||
|
|
如有疑问，默认的文本对齐通常是最佳选择。特别是对于文章或长文本块，左对齐文本最容易阅读，因为右边的参差不齐的边缘提供了视觉上下文，以帮助读者保持他们的位置，因为他们的眼睛从一行到另一行。
|
|||
|
|
|
|||
|
|
用来：
|
|||
|
|
|
|||
|
|
* 主体
|
|||
|
|
* 绝大部分都是
|
|||
|
|
|
|||
|
|
### 右对齐文本
|
|||
|
|
|
|||
|
|
`text-align: right;`
|
|||
|
|
|
|||
|
|
右对齐，左边粗糙的文本可以作为视觉香料使用，但是在长期阅读中比左对齐文本更难阅读。
|
|||
|
|
|
|||
|
|
可用于：
|
|||
|
|
|
|||
|
|
* 标题
|
|||
|
|
* 导航
|
|||
|
|
* 侧边栏
|
|||
|
|
* 语录
|
|||
|
|
|
|||
|
|
### 居中文本
|
|||
|
|
|
|||
|
|
`text-align: center;`
|
|||
|
|
|
|||
|
|
使用居中的文本将读者的眼睛拉到重点（例如，标题，页面标题，页脚）。不要将居中文本用于长文本块，因为阅读非常耗费精力。
|
|||
|
|
|
|||
|
|
可用于：
|
|||
|
|
|
|||
|
|
* 标题
|
|||
|
|
* 页面标题
|
|||
|
|
* 导航
|
|||
|
|
* 侧边栏
|
|||
|
|
* 标题
|
|||
|
|
* 语录
|
|||
|
|
* 页脚
|
|||
|
|
|
|||
|
|
### 正当的文本
|
|||
|
|
|
|||
|
|
`text-align: justify;`
|
|||
|
|
|
|||
|
|
对于正文来说，完全对齐的文本很难推荐，因为某些行中的单词之间可能会出现大的间隙。然而，熟练的设计师可以很好地利用它。
|
|||
|
|
|
|||
|
|
可用于：
|
|||
|
|
|
|||
|
|
* 标题
|
|||
|
|
* 图片的标题说明
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
* [维基百科文章](https://en.wikipedia.org/wiki/Typographic_alignment)
|
|||
|
|
* [网页风格指南](https://webstyleguide.com/wsg2/type/align.html)
|
|||
|
|
* [Web上的文本对齐方式](http://www.webpagemistakes.ca/text-alignment-on-the-web/)
|