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

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

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

    B、在高品質(zhì)網(wǎng)頁(yè)設計中，好的對齊方式占了很大的比重：當物品排成一行時(shí)，通?？瓷先ジ杏X(jué)***。因此，使用不同的對齊方式來(lái)建立對比是較難的而且要更謹慎的使用，但是如果做的好的話(huà)是非常有效的。比如：在文章中，我們常常是用左對齊的文本段落和居中對齊的標題來(lái)混合起來(lái)，這是使用不同的對齊方式建立對比的***hao例子。

    C、從用戶(hù)視線(xiàn)行為來(lái)分析對齊方式：用戶(hù)的視線(xiàn)常常是從上到下，從左到右，那么框架之間***hao的就要左右對齊，上下對齊，讓視線(xiàn)更流暢。導航頁(yè)的內容鏈接，當用戶(hù)看完一個(gè)鏈接后，會(huì )接著(zhù)看下一個(gè)鏈接，左對齊仍然是***hao的方式。

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

第1部分講了，用戶(hù)的視線(xiàn)常常是從上到下，從左到右，那么框架之間***hao的就要左右對齊，上下對齊，讓視線(xiàn)更流暢。但是有時(shí)左邊框架的內容更高，右邊要放2個(gè)模塊才可能和左邊一樣多，這個(gè)時(shí)候我們***要確保右邊2個(gè)模塊或多個(gè)模塊剛好和左邊的一個(gè)框架對齊，這樣看起來(lái)才更統一。

    3、內容與小圖標之間的對齊方式

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

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

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

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

    B 文字放圖片右邊：文字水平方向要左對齊，因為用戶(hù)看了圖片，就要看圖片周?chē)奈淖?，如果采用右對齊或居中對齊，都會(huì )使視線(xiàn)不連貫。垂直方向要兩端對齊，看起來(lái)更規整，一般是標題和導讀內容與圖片兩端對齊。

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

    5、信息錄入提交表單頁(yè)面

    在表單頁(yè)面使操作區域對齊，將大大提升用戶(hù)完成任務(wù)的效率，所以輸入框左對齊是***的，當用戶(hù)輸入完一個(gè)框后，接著(zhù)往下一個(gè)框，可以節省用戶(hù)的時(shí)間。但是作為提示輸入內容的文字，則要右對齊***hao，因為提示語(yǔ)言有的多有的少，會(huì )造成提示語(yǔ)言和輸入框之間產(chǎn)生空白區域，加重了用戶(hù)的認知負擔，用戶(hù)***花相當多的時(shí)間以便在標簽和輸入框之間移動(dòng)視線(xiàn)。

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