CSS表格中文字在底部居中是網頁設計中比較基礎的操作,下面介紹一個簡單的代碼實現方法。
table { border-collapse: collapse; /*設置表格邊框合并*/ width: 100%; } th, td { border: 1px solid #ddd; /*設置表格邊框*/ text-align: center; /*設置文字居中*/ vertical-align: bottom; /*文字在底部*/ padding: 8px; /*設置單元格內邊距*/ }
以上代碼實現了邊框合并、文字居中、文字在底部以及單元格內邊距四個操作。
其中,border-collapse
屬性用于實現表格邊框合并,使相鄰單元格的邊框合并為一個;text-align
屬性用于實現文本的水平居中;vertical-align
屬性用于實現文本的垂直居中,這里選用了底部對齊方式;padding
屬性用于實現單元格內邊距的設置,避免文本和邊框挨得太緊。
此外,還有一種使用display
屬性實現文本在底部居中的方法。
td { display: flex; /*設置為彈性盒子*/ align-items: flex-end; /*設置垂直居底*/ justify-content: center; /*設置水平居中*/ }
以上代碼中,display
屬性將單元格設置為彈性盒子,align-items
屬性設置了垂直方向上的對齊方式為底部對齊,justify-content
屬性設置了水平方向上的對齊方式為居中。
總之,實現表格中文字在底部居中的方法比較簡單,只需要掌握這幾個CSS屬性即可。
上一篇java集合和泛型一樣嗎
下一篇css放大縮小不變形