<style> /* 將表格內所有單元格的文本居中 */ table td, table th { text-align: center; } /* 某個特定單元格右對齊 */ .right-aligned-cell { text-align: right; } </style> <table> <tr> <td>默認左對齊</td> <td style="text-align: right;">行內右對齊</td> <th>標題居中</th> </tr> <tr> <td class="right-aligned-cell">類選擇器右對齊</td> <td>普通文本</td> <td><p style="text-align: justify;">這是一段嘗試兩端對齊的文本，看看它在表格單元格中的表現如何。通常需要多行文字才能看出效果。</p></td> </tr> </table>
<style> table { height: 200px; /* 為了演示垂直對齊，給表格一個高度 */ width: 100%; border-collapse: collapse; } td, th { border: 1px solid #ccc; height: 80px; /* 給單元格一個高度 */ } .top-aligned { vertical-align: top; } .middle-aligned { vertical-align: middle; } .bottom-aligned { vertical-align: bottom; } </style> <table> <tr> <td class="top-aligned">頂部對齊的文本</td> <td class="middle-aligned">垂直居中對齊的文本</td> <td class="bottom-aligned">底部對齊的文本</td> </tr> <tr> <td class="top-aligned">更多內容<br>多行文本</td> <td class="middle-aligned">更多內容<br>多行文本</td> <td class="bottom-aligned">更多內容<br>多行文本</td> </tr> </table>
<style> .my-table { width: 100%; border-collapse: collapse; } .my-table td, .my-table th { border: 1px solid #ddd; padding: 8px; height: 100px; /* 為了看出垂直對齊效果，給單元格一個固定高度 */ vertical-align: middle; /* 核心：垂直居中 */ text-align: center; /* 順便也水平居中 */ } </style> <table class="my-table"> <tr> <th>標題一</th> <th>標題二</th> <th>標題三</th> </tr> <tr> <td>短文本</td> <td>這是一段相對較長的文本，用來測試垂直居中對齊的效果，看看它在單元格中是否能很好地居中顯示。</td> <td>另一個短文本</td> </tr> </table>
<style> .justified-cell { text-align: justify; /* 為了看到效果，可能需要限制寬度并增加內容 */ width: 150px; } </style> <table> <tr> <td class="justified-cell"> 這是一段需要兩端對齊的文本，看看它在單元格中的表現，文字會盡可能填充整個寬度。 </td> </tr> </table>
<style> .flex-cell { display: flex; align-items: center; /* 垂直居中所有子項 */ justify-content: space-between; /* 子項之間平均分布空間 */ border: 1px solid #ccc; padding: 10px; } .icon { /* 假設是圖標 */ margin-right: 10px; } .button { /* 假設是按鈕 */ margin-left: 10px; } </style> <table> <tr> <td class="flex-cell"> <span class="icon">?</span> <span>這是一個靈活對齊的單元格內容</span> <button class="button">操作</button> </td> </tr> </table>
<style> .padded-cell { padding: 15px 20px; /* 上下15px，左右20px內邊距 */ text-align: right; } </style> <table> <tr> <td class="padded-cell"> 右對齊且有更多內邊距的文本。 </td> </tr> </table>
<style> .no-wrap-cell { white-space: nowrap; /* 不換行 */ overflow: hidden; /* 溢出部分隱藏 */ text-overflow: ellipsis; /* 溢出時顯示省略號 */ text-align: center; /* 文本居中 */ max-width: 100px; /* 限制單元格寬度 */ } </style> <table> <tr> <td class="no-wrap-cell"> 這是一個非常非常長的文本，它應該不會換行，并且會顯示省略號。 </td> </tr> </table>
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
