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