站長資訊網css設置水平對齊的方法：1、使用“text-align: center;”樣式設置文本元素水平居中對齊；2、使用“margin: auto;”樣式設置塊狀元素水平居中對齊。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
1、使用text-align: center;
text-align屬性指定元素文本的水平對齊方式。
屬性值：
-
left 把文本排列到左邊。默認值：由瀏覽器決定。
-
right 把文本排列到右邊。
-
center 把文本排列到中間。
-
justify 實現兩端對齊文本效果。
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .center { text-align: center; border: 3px solid green; } </style> </head> <body> <h2>文本居中對齊</h2> <div class="center"> <p>文本居中對齊。</p> </div> </body> </html>
效果圖：
【推薦教程：CSS視頻教程 】
2、使用margin: auto;
margin簡寫屬性在一個聲明中設置所有外邊距屬性。
屬性值：
-
auto 瀏覽器計算外邊距。
-
length 規定以具體單位計的外邊距值，比如像素、厘米等。默認值是 0px。
-
% 規定基于父元素的寬度的百分比的外邊距。
要水平居中對齊一個元素(如 <div>), 可以使用 margin: auto;。
設置到元素的寬度將防止它溢出到容器的邊緣。
元素通過指定寬度，并將兩邊的空外邊距平均分配
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <h2>元素居中對齊</h2> <div class="center"> <p>div 元素是居中的</p> </div> </body> </html>
效果圖：
