CSS單元格對齊方式非常重要，可以使網頁布局更加清晰、美觀。在使用表格進行頁面布局時，合理的單元格對齊方式可以幫助我們更好的展示表格數據。 在CSS中有多種單元格對齊方式，包括水平對齊方式和垂直對齊方式。 ## 水平對齊方式 ### text-align text-align屬性控制文本在單元格中的水平對齊方式。可以設置的參數有left（左對齊）、right（右對齊）、center（居中對齊）和justify（兩端對齊）。 ``` table{ width: 100%; border-collapse: collapse; } td{ text-align: center; /*水平居中對齊*/ border: 1px solid #000; } ``` ### justify-items justify-items屬性用于控制單元格內容在水平方向上的對齊方式，包括left（左對齊）、right（右對齊）、center（居中對齊）和stretch（拉伸對齊）。 ``` table{ width: 100%; border-collapse: collapse; justify-items: center; /*水平居中對齊*/ } td{ border: 1px solid #000; } ``` ## 垂直對齊方式 ### vertical-align vertical-align屬性用于控制單元格內容在垂直方向上的對齊方式，包括top（頂部對齊）、bottom（底部對齊）、middle（居中對齊）和baseline（基線對齊）。 ``` table{ width: 100%; border-collapse: collapse; } td{ text-align: center; vertical-align: middle; /*垂直居中對齊*/ border: 1px solid #000; } ``` ### align-items align-items屬性用于控制單元格內容在垂直方向上的對齊方式，包括stretch（拉伸對齊）、flex-start（起始對齊）、flex-end（結束對齊）和center（居中對齊）。 ``` table{ width: 100%; border-collapse: collapse; align-items: center; /*垂直居中對齊*/ } td{ border: 1px solid #000; } ``` 總之，合理地使用水平和垂直對齊方式可以大大改善網頁排版效果，提高用戶的閱讀體驗。