在網頁設計中,圖片的橫向對齊和文字的橫向對齊方法基本相同,分為左、中、右3種。不同的是圖片的對齊不能直接通過設置圖片的text-align屬性來定義,而是需要通過設置其父元素的該屬性,使其繼承text-align屬性來實現。
【示例】新建一個網頁,保存為test.html,在<body>標簽中輸入以下代碼,并分別設置align屬性調整對齊方式。
<table width="100%" border="1">
<tr>
<td style="text-align:left;">
<img src="images/1.jpg"></td>
</tr>
<tr>
<td style="text-align:center;">
<img src="images/1.jpg"></td>
</tr>
<tr>
<td style="text-align:right;"><img src="images/1.jpg"></td>
</tr>
</table>
網頁設計時,圖片的縱向對齊主要體現在和文字的搭配使用中,當圖片的高度和寬度與文字部分不一致時,可以通過CSS中的vertical-align屬性來設置縱向對齊。{vertical-align:參數}
【示例1】新建一個網頁,保存為test.html,在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式:
img { border: 1px #990000 solid; /*設置圖片邊框*/
height: 50px; /*設置圖片高度*/}
然后在<body>標簽中輸入一行段落文本,并應用上面的類樣式。
<p class="baseline">縱向對齊baseline<img src="images/1.jpg" style="vertical-align:baseline" /></p>
<p class="sub">縱向對齊sub:<img src="images/1.jpg" style="vertical-align:sub" /></p>
<p class="super">縱向對齊super:<img src="images/1.jpg" style="vertical-align:super" /></p>
<p class="top">縱向對齊top:<img src="images/1.jpg" style="vertical-align:top" /></p>
<p class="middle">縱向對齊middle:<img src="images/1.jpg" style="vertical-align:middle" /></p>
<p class="bottom">縱向對齊bottom:<img src="images/1.jpg" style="vertical-align:bottom" /></p>>
【示例2】與文字的縱向對齊相似,圖片的縱向對齊也可以設置具體的數值。啟動Dreamweaver,新建一個網頁,保存為test1.html,在<body>標簽內輸入如下結構:
<p>縱向對齊<img src="images/1.jpg" style="vertical-align:5px;">方式: 5px</p>
<p>縱向對齊<img src="images/1.jpg;" style="vertical-align:-20px;">方式: -20px</p>
<p>縱向對齊<img src="images/1.jpg" style="vertical-align:15px;">方式: 15px</p>
在<head>標簽內添加<style type="text/css">標簽,定義一個內部樣式表,然后定義如下兩個樣式:
p { font-size: 20px; }img {
border: 1px #990000 solid;
height: 80px;}
在瀏覽器中預覽測試,可以看出,圖片在垂直方向上發(fā)生了位移,在網站建設中,當設置的值為正數時,圖片向上移動相應的數值;當設置為負數時,圖片向下移動相應的數值。