此篇会介绍使用 text-align、vertical-align 对齐时的注意事项以及常见问题，最後会分享两个新手容易遇到的雷。

text-align

针对行内元素对齐的方式，但只对元素 内容 对齐，而不是元素 本身 。

⚠️ 仅对行内元素有作用。

常见问题

• text-align 没效果
  • 原因：text-align 行内元素才会起作用。

• 解决：设置 inline、inline-table 或 inline-block。

错误迷思

• text-align 只能文字对齐
  • 原因：翻译惹的祸，只要是 行内元素 标签都会有效果。

啥？假图怎麽做？

推荐两个我常用的网站：

fakeimg

• 灵活度高（适合 Dev）
• 可以更改图片中的文字内容，在开发的时候超方便（可以先写入图片尺寸、描述）

picsum

• 好看（适合 Demo）

vertical

元素 垂直 对齐的方式。（透过推挤子元素与父元素之间的间距）

⚠️ 仅对行内元素有作用。

正数值、负数值差异

以下范例将 vertical-align 设置於中间两个元素。

正数值

• 没有设置 vertical-align 的元素向下推。

负数值

• 有设置 vertical-align 的元素向下推。

结论

• vertical-align 是透过 向下 推挤和父元素之间的间距所产生的。
• 透过 正数、负数 值来选择要推挤的元素，达到 向上 推挤的 错觉。

常见问题

多行时没效果

• 原因：vertical-align:middle 对齐是从 <br> 断行後的行内元素作为对齐元素。

• 解决：设置 inline-block

很多行发现只有 最後一行 垂直置中，甚至会 破版 推挤出不明空白

• 原因：左边文字段落空间，是直接以右边图片高度的一半作为对齐位置。（而不是均分上下高度）

• 解决：使用表格属性在加垂直置中

display: table-cell;
vertical-align: middle;

大雷坑

分享两个刚开始切版时最常遇到的问题。

img 预设下方会预留 2-3px 空间

• 问题：高度会多 2-3px。
• 原因：
  • 请参考叶子学姊写的：HTML img 下方有不明空隙？！

• 三种解决办法：
  • vertical-align: middle
  • display: block（最常用）
  • 父元素设置 font-size: 0px

Collapsing margins

在某些情况下相邻的 margin 会合并成成单一个，导致 margin 跑到外层。（仅发生於垂直方向）

原因：

• 父元素与子元素都是 区块元素，且内层第一个子元素（空元素不算），没有 float、absolute 属性。
• 父元素没有 border、padding、overflow 属性将内外隔开，导致垂直方向的 margin 重叠。

常用的解决方式：

• 父元素或子元素更改为非 区块元素。
• 子元素加上 float、absolute 属性。
• 父元素加上 border、padding、overflow(hidden、scroll、auto) 属性。
• 建立新的 块格式化上下文(BFC)。
  • 详细讲解 BFC 文章以及如何新增：CSS 原理 - Block Formatting Context

解决方法放在CodePen。

恭喜技能进化 水操作

可以自由自在使用魔力操控间距