CSS3 Box Align 簡介 CSS3 Box Align 是一個用于對齊和定位盒子的 CSS3 屬性。通過使用 Box Align 屬性，開發者可以輕松地控制盒子的位置和對齊方式。同時，Box Align 還可以用于設置內部元素的對齊方式。 Box Align 的取值 Box Align 屬性有以下幾種取值： - start：讓盒子或盒子內元素與父元素的開頭對齊。 - end：讓盒子或盒子內元素與父元素的末尾對齊。 - center：讓盒子或盒子內元素在父元素的中間對齊。 - baseline：讓盒子或盒子內元素的基線與父元素的基線對齊。 - stretch：讓盒子或盒子內元素的高度或寬度與父元素相同。 Box Align 示例 下面是 Box Align 的示例代碼：

.box {
width: 200px;
height: 100px;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #000;
}
.box p {
font-size: 24px;
color: #fff;
}

接下來是 HTML 代碼：

Hello World!

在這個示例中，我們創建了一個名為 box 的類，寬為 200 像素、高為 100 像素的盒子。我們將其轉化為彈性盒子，使用 justify-content 和 align-items 屬性來讓文本居中對齊。 我們在 div 中添加了一個 p 標簽，這個標簽是屬于盒子內部元素的。我們還設置了文本的字體大小和顏色。 以上代碼示例中，我們使用了居中對齊的方式，實現了盒子和盒子內元素的居中對齊。這里需要注意的是，我們將盒子轉化為彈性盒子，因此才能使用 justify-content 和 align-items 屬性。 總結 CSS3 Box Align 是一個很實用的 CSS3 屬性，可用于控制盒子及盒子內元素的位置和對齊方式。Box Align 取值包括 start、end、center、baseline 和 stretch，開發者可以根據需要進行選擇。同時，需要注意的是，只有彈性盒子才能使用 Box Align 屬性。