◀ 返回草场 #14 对齐 (Alignment)
混乱的营地
🧑‍🦱
Young David (少年大卫):
看哪，这营地乱七八糟！
犹大支派在左边，流便支派在右边，约柜却被挤到了角落里！
神是有秩序的神。我们需要对齐！
犹大 (Left)
流便 (Left)
约柜 (???)
会众的排列 (Text Align)

居左 (Start)

text-align: left;
像希伯来文的阅读习惯 (其实是英文...)

居中 (Center)

text-align: center;
万民围着会幕

居右 (End)

text-align: right;
希伯来文是从右往左读的！

两端对齐 (Justify)

text-align: justify;
把整行充满，像整齐的军队方阵，不留空隙。
安放约柜 (Block Center)
🧑‍🦱
Young David (少年大卫):
文字可以用 text-align，但约柜 (Block 元素) 不行！
要让一个有宽度的盒子居中，我们需要一个神奇的咒语：
Margin: Auto
约柜
(Ark) 
.ark {
    width: 100px;
    margin: 0 auto; /* 上下0，左右自动 */
}
/* 左右两边的绳子拉力平衡，它就居中了 */
🦊
Little Fox (小狐狸):
如果我想垂直居中呢？
margin: auto 0 auto 0 ?
🧑‍🦱
Young David (少年大卫):
不... 在普通布局里这行不通。
那是更高级的魔法 —— Flexbox (Level 3) 的领域。
◀ 上一课 Level 2 完成！🎉