css文本對齊 text-align

一、文本對齊方式

文本對齊指的是文本在容器中的布局位置，常見的文本對齊方式有：

• 左對齊（默認）

• 右對齊

• 居中對齊

• 兩端對齊

• 分散對齊

其中，左對齊是最常見的一種，也是默認的對齊方式。右對齊和居中對齊則需要設置相應的樣式，分別是：

text-align:right;/*右對齊*/
text-align:center;/*居中對齊*/

兩端對齊和分散對齊在中文排版中使用較少。

二、表格對齊

在表格中，文本對齊的方式影響了整個表格的美觀度和可讀性。表格中的文字可以通過以下樣式來設置對齊方式：

table{
width:100%;
border-collapse:collapse;/*邊框合併*/
table-layout:fixed;/*表格布局*/
}
th,td{
text-align:center;/*居中對齊*/
padding:10px;/*單元格內邊距*/
border:1pxsolid#ccc;/*邊框樣式*/
}

上述代碼中，通過設置表格布局為固定布局，可以讓表格的列寬按照設置的寬度進行分配，避免了在表格寬度不足時出現單元格內容不對齊的問題。

三、彈性盒子對齊

在使用彈性盒子布局時，對於文本的對齊方式也十分靈活。通過設置容器的 justify-content 屬性和子元素的 align-self 屬性，可以實現多種對齊方式。

.container{
display:flex;
justify-content:space-between;/*左右對齊*/
}
.item{
align-self:center;/*上下居中對齊*/
}

在上述代碼中，父元素容器設置為彈性盒子布局，並通過設置 justify-content 屬性實現左右對齊；子元素通過設置 align-self 屬性實現上下居中對齊。

四、文字排版

在中文排版中，除了對齊方式，還需要注意文本行間距、段間距、字距等因素，以保證文本的美觀性和可讀性。

行間距可以通過設置 line-height 屬性來控制，一般推薦將行間距設置為1.5倍字型大小大小。段間距則可以通過設置 margin 屬性來實現。

p{
line-height:1.5em;/*行間距設置為1.5倍字型大小大小*/
margin-top:1.5em;/*段前距為1.5倍行高*/
margin-bottom:1.5em;/*段後距為1.5倍行高*/
text-indent:2em;/*首行縮進2個字距*/
}

五、總結

優雅地對齊文本是一個綜合性的問題，需要考慮到各種因素的影響。通過上述方法和技巧，可以更好地控制文本對齊方式，提高頁面的美觀度和可讀性。