網(wǎng)頁里各種元素水平方向的對齊方式主要有：左對齊、右對齊、居中對齊和兩端對齊等4種方式，常用的為左對齊、居中對齊，右對齊和兩端對齊基本很少使用，尤其是兩端對齊，本文作者李學(xué)江認(rèn)為一般只在平面設(shè)計的時候會使用。

　　1、頁面各種元素對齊方式的基礎(chǔ)知識

　　A、左對齊在網(wǎng)站布局中是最常見的對齊方式：它整齊一致并且安全，因為大家對這種對齊方式很熟悉并且也樂意接受，所以對任何設(shè)計來說，左對齊都是最保險的對齊方式。

　　B、在高品質(zhì)網(wǎng)頁設(shè)計中，好的對齊方式占了很大的比重：當(dāng)物品排成一行時，通常看上去感覺更好。因此，使用不同的對齊方式來建立對比是較難的而且要更謹(jǐn)慎的使用，但是如果做的好的話是非常有效的。比如：在文章中，我們常常是用左對齊的文本段落和居中對齊的標(biāo)題來混合起來，這是使用不同的對齊方式建立對比的最好例子。

　　C、從用戶視線行為來分析對齊方式：用戶的視線常常是從上到下，從左到右，那么框架之間最好的就要左右對齊，上下對齊，讓視線更流暢。導(dǎo)航頁的內(nèi)容鏈接，當(dāng)用戶看完一個鏈接后，會接著看下一個鏈接，左對齊仍然是最好的方式。

　　2、框架與框架之間的對齊方式

　　第一部分講了，用戶的視線常常是從上到下，從左到右，那么框架之間最好的就要左右對齊，上下對齊，讓視線更流暢。但是有時左邊框架的內(nèi)容更高，右邊要放2個模塊才可能和左邊一樣多，這個時候我們必須要確保右邊2個模塊或多個模塊剛好和左邊的一個框架對齊，這樣看起來才更統(tǒng)一。

　　3、內(nèi)容與小圖標(biāo)之間的對齊方式

　　標(biāo)題欄上的小圖標(biāo)與標(biāo)題欄名稱、內(nèi)容鏈接左邊的小圖標(biāo)等，都是采用上下居中對齊，左邊左對齊的方式，一般內(nèi)容鏈接左邊都有一個小圖標(biāo)，小圖標(biāo)右邊的標(biāo)題也要左對齊。而且整站上下不同的框架之間，也要上下對齊。

　　4、產(chǎn)品圖片、人物圖片等與內(nèi)容的對齊方式

　　這種方式分為兩種，水平對齊方式與居中對齊方式。

　　A 文字放圖片下方：這種方式一般為居中對齊，因為如果左對齊，文字如果少了，會顯的比較難看，尤其是人物圖片，只有一個人名。

　　B 文字放圖片右邊：文字水平方向要左對齊，因為用戶看了圖片，就要看圖片周圍的文字，如果采用右對齊或居中對齊，都會使視線不連貫。垂直方向要兩端對齊，看起來更規(guī)整，一般是標(biāo)題和導(dǎo)讀內(nèi)容與圖片兩端對齊。

　　更多的對齊方式在《B2B行業(yè)門戶網(wǎng)站設(shè)計開發(fā)實戰(zhàn)研究報告》第四章第四節(jié)里做了詳細(xì)闡述。

　　5、信息錄入提交表單頁面

　　在表單頁面使操作區(qū)域?qū)R，將大大提升用戶完成任務(wù)的效率，所以輸入框左對齊是必須的，當(dāng)用戶輸入完一個框后，接著往下一個框，可以節(jié)省用戶的時間。但是作為提示輸入內(nèi)容的文字，則要右對齊最好，因為提示語言有的多有的少，會造成提示語言和輸入框之間產(chǎn)生空白區(qū)域，加重了用戶的認(rèn)知負(fù)擔(dān)，用戶必須花相當(dāng)多的時間以便在標(biāo)簽和輸入框之間移動視線。

　　操作過程中，用戶更關(guān)注輸入框本身，而不是標(biāo)簽。用戶眼睛關(guān)注點的轉(zhuǎn)移速度是非常快的，并且即使不從頭閱讀標(biāo)簽也能明白它的意思，對于用戶的行為分析，本文作者在《B2B行業(yè)門戶網(wǎng)站策劃實戰(zhàn)研究報告》里做了詳細(xì)的闡述。