網頁設計中怎麼使插入圖片對齊

1、網頁設計中怎樣能使圖片與水平線對齊？？？

?

2、網頁製作問題，怎麼讓字對齊上面圖片

圖片上加屬性

<img style="float:left;" src="" />

同時它的父元素要清楚浮動

3、網頁製作圖片怎麼居中

圖片的寬度和高度是未知的，沒有一個固定的尺寸，在這個前提下要使圖片在一個固定了寬度和高度的容器中垂直居中，想想感覺還是挺麻煩的，由於最近的項目可能會用到這個方案，所以把一些常用的方法都收集整理了一下。

下圖是理想中的效果圖，外部容器的寬度和高度是固定的，中間的圖片寬度和高度未知，但是圖片要始終要相對於外部的容器垂直居中。

但是實際中實現的效果並不是很完美，由於各瀏覽器的解析都各不相同，所以各瀏覽器都會有1px-3px的偏差。

方法一 (XHTML 1.0 transitional)：

該方法是將外部容器的顯示模式設置成display:table，img標簽外部再嵌套一個span標簽，並設置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當然這只是在標准瀏覽器下，IE6/IE7還得使用定位。

HTML結構部分：

<div id="box">
  <span><img src="images/demo.jpg" alt=""></span>
</div>

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二 (XHTML 1.0 transitional)：

方法二和方法一的實現的原理大同小異，結構也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*針對IE6/7的Hack*/
top:50%; /*針對IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*針對IE6/7的Hack*/
top:-50%;left:-50%; /*針對IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

該方法有個弊端，在標准瀏覽器下由於外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，並且在IE8下設置邊框也無效。

方法三 (XHTML 1.0 strict)：

標准瀏覽器還是將外部容器#box的顯示模式設置為display:table-cell，IE6/IE7是利用在img標簽的前面插入一對空標簽的辦法。

HTML結構部分：

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
  display:inline-block;
  height:100%;
  vertical-align:middle
  }
#box img {
  vertical-align:middle
  }
</style>
<![endif]-->

方法三也同樣適用XHTML 1.0 transitional。以上方法都是收集於網頁教學網，暫時只對這3個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

4、請教大家網頁製作時圖片怎麼水平對齊？

你這樣做有點不科學,不同解析度的顯示器顯示的效果會不一樣,最好把兩張圖各放在一個框里,然後把表格的填充、間距、邊框都設為0，這樣兩張圖就能貼緊，又能對齊了。

5、用dreamweaver製作網頁時,怎麼讓文字和圖片對齊

滑鼠選擇要更改的文字點擊《屬性》
點擊《css》
更改字體，點擊《字體》的第一個下拉框來更改文件的字體
設計文字對齊方式。如居中對齊。
設計字體大小 ，點擊《大小》第一個下拉框來選擇想要的字體字大小。比如24。
更改字體大小單位通常為px即像素。更改方法點擊大小的第二個選擇框。
設計文字的顏色。點擊《大小》的第三個按鈕在彈出的色板中滑鼠移到喜歡的顏色上點擊即可。
不要忘記保存文件，要不然在瀏覽器預覽時沒有效果。

6、網頁設計怎麼把兩張圖片放平對齊

可用DIV做
你的意思是在兩張圖片中間放表格嗎？如果是的話那就可以這樣：
<style>
#vv{ float:left;}
</style>
<div id="vv"><img src=....../></div>----圖片一
<table 設置寬度高度 float=left;>
<tr>
<td></td>
<td></td>
</tr>
</table>
<div><img src=....../></div>----圖片二

這樣做就是把第一個DIV和中間表格的float都設置成left，這樣第二張圖片就自動跑上去了

7、在網頁設計中圖片怎麼和下標字對齊

我自己做法是：
<img src=「../imagefiles/1_06c573b9-b935-4a85-a413-963ef0306998.jpg」 /><span>寧波埃美柯水管</span>

然後給span寫樣式:「display:block;」使文字所在的SPAN變成塊狀，回然後再定義SPAN的寬度答與圖片一樣，最後再設置SPAN內容居中就好了

8、如何運用網頁設計中對齊原則

西安UIpark
視覺上遵從保持尺寸和邊緣的一致性。

對齊可以讓一個網站頁面看起來比較規范整齊。對齊一般有三種方式：左對齊、居中對齊、右對齊。
在網頁當中運用比較多的是居中對齊和左對齊，大篇幅的右對齊可讀性上比較差，所以出現的頻率不高，小部分的出現還是有的。不管是哪種方式的對齊，網頁中對齊後的文本一定要考慮可讀性的問題，千萬不要本末倒置。
對齊在網頁中的運用無非還是上面那三種對齊方式，正常情況下我們要注意的對齊有這些：元素的對齊、文字的對齊、圖片的對齊、區塊布局的對齊。
1、元素對齊
元素的對齊指的是網頁中的一些按鈕、圖標、搜索框等網頁中的元素統一採用一種對齊方式對齊。

用主頁來舉例，可以看到圖標部分都是居左對齊的，元素上的對齊分布讓整個界面看起來整齊簡潔，內容劃分也變得比較明確，可讀性強，方便瀏覽者瀏覽。

一個網頁當中，會有很多元素，而元素的對齊可以讓整個界面變得井然有序，元素過於隨意擺放沒有規律，會讓界面雜亂無章。

2、文字的對齊

文字的對齊方式也不外乎上面三種，左對齊是最常見的，居中對齊常出現在文章詳情的標題部分，右對齊文字出現的頻率小一點，不會以大篇幅出現，大部分在登陸注冊或是產品詳情界面中常見。

左對齊的方式適合人們的閱讀習慣，在網頁中也比較常見，這里不多講了。

居中對齊是進幾年隨著html5流行起來，越來越多設計師用居中對齊作為一些區塊內容展示的方式。

可以看到，蘋果官網在產品介紹頁面，文字用得比較多的是這種居中對齊。這樣的對齊方式有個好處就是讓瀏覽者的視線集中在該區塊內容上，其次從樣式上的不對稱感可以增加界面的層次感和設計感。但是文字居中對齊不適用於文字內容太多的區塊。

右對齊常見到的是在一些小的細節中，比如登陸注冊界面、底部導航區塊等，仔細看看還是可以發現有一些地方用到了右對齊。

惠普商城注冊界面中輸入框提示文字全部都是居右對齊，讓提示信息和輸入框看起來更為整體和舒服。在注冊界面上的設計，大部分設計都是提示信息居右對齊，包括蟬知注冊界面也是這樣的設計方式，不信可以打開網站看看。

3、圖片的對齊

圖片對齊也不外乎上面說的三種方式，圖片對齊好處理一些，主要根據網頁想表達的內容去做對齊，以達到好的視覺展示效果。所以在不同的情況下，可以採用不同的對齊方式。

在當當的圖書展示頁中，列表展示方式下圖片在圖片的左邊，文字在圖片的右側。

在大圖展示方式下，可以看到產品圖是居中展示的。所以就算是同一個網站也不會只用一種對齊方式，對齊比較靈活，就算是同個頁面，也可能為了視覺效果而採用兩種或三種對齊方式，這個根據整個界面的效果而定。

4、區塊布局的對齊

上面講的小元素對齊重要，那大的區塊對齊也很重要。視覺上的對齊，可以讓瀏覽者快速的瀏覽到相應的內容。小元素不對齊會顯得亂，大區塊不對齊會讓整個界面沒有秩序感。

這樣的情況最常出現在一些產品展示的網站當中，設計這個網頁的設計師說他們刻意追求不對稱感。按鈕的不對齊，和區塊的不對齊，讓整個界面顯得很粗糙。在不是瀑布流的情況下，這種區塊大幅度出現在界面當中的時候，對瀏覽者來說就是一種折磨。

說到區塊的對齊，不得不提的柵格系統，柵格系統可以讓一個網站看起來有秩序感。很多人不喜歡柵格系統，覺得限制他們自己的創意。

事實上，柵格的運用可以很靈活，分多少欄全看設計師的設計。

用當當的登陸界面給大家總體分析一下，在當當網的界面當中，有左對齊、居中對齊和右對齊，其實這些概念大家都懂，就是不知道怎麼合理的運用到各個網頁當中。

可以看到整個界面的層次區分圖，這是人視覺停留的內容層次圖，通過層級關系的分析，我們可以找到一定的規律：

第一眼是居中顯示的，當視線提留到1區時，1區的內容是右對齊，視線轉移到2區時，2區內容是左對齊。3區則是為了平衡界面有左對齊也有右對齊。

因此可見，對齊也是有層次的，不同層次內容可以採用不同的對齊方式。

對齊相比較之前的其他設計原則來說，會比較簡單也好理解，但是在具體的實踐過程中，還需要設計師們去思考和設計。對齊，不僅可以在信息層級上一致，而且會更有氣勢。

總之，在做網站的時候要以內容為主旨，界面設計一定是要方便用戶快速找到他們想要的。其次使用正確的對齊方式，讓界面更為整齊，信息更為明確。