在網(wǎng)頁設(shè)計中，圖片的橫向?qū)R和文字的橫向?qū)R方法基本相同，分為左、中、右3種。不同的是圖片的對齊不能直接通過設(shè)置圖片的text-align屬性來定義，而是需要通過設(shè)置其父元素的該屬性，使其繼承text-align屬性來實現(xiàn)。
【示例】新建一個網(wǎng)頁，保存為test.html，在<body>標簽中輸入以下代碼，并分別設(shè)置align屬性調(diào)整對齊方式。
<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>
網(wǎng)頁設(shè)計時，圖片的縱向?qū)R主要體現(xiàn)在和文字的搭配使用中，當圖片的高度和寬度與文字部分不一致時，可以通過CSS中的vertical-align屬性來設(shè)置縱向?qū)R。{vertical-align:參數(shù)}
【示例1】新建一個網(wǎng)頁，保存為test.html，在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式：
img { border: 1px #990000 solid; /*設(shè)置圖片邊框*/
height: 50px; /*設(shè)置圖片高度*/}
然后在<body>標簽中輸入一行段落文本，并應(yīng)用上面的類樣式。
<p class="baseline">縱向?qū)Rbaseline<img src="images/1.jpg" style="vertical-align:baseline" /></p>
<p class="sub">縱向?qū)Rsub：<img src="images/1.jpg" style="vertical-align:sub" /></p>
<p class="super">縱向?qū)Rsuper：<img src="images/1.jpg" style="vertical-align:super" /></p>
<p class="top">縱向?qū)Rtop：<img src="images/1.jpg" style="vertical-align:top" /></p>
<p class="middle">縱向?qū)Rmiddle：<img src="images/1.jpg" style="vertical-align:middle" /></p>
<p class="bottom">縱向?qū)Rbottom：<img src="images/1.jpg" style="vertical-align:bottom" /></p>>
【示例2】與文字的縱向?qū)R相似，圖片的縱向?qū)R也可以設(shè)置具體的數(shù)值。啟動Dreamweaver，新建一個網(wǎng)頁，保存為test1.html，在<body>標簽內(nèi)輸入如下結(jié)構(gòu)：
<p>縱向?qū)R<img src="images/1.jpg" style="vertical-align:5px;">方式: 5px</p>
<p>縱向?qū)R<img src="images/1.jpg;" style="vertical-align:-20px;">方式: -20px</p>
<p>縱向?qū)R<img src="images/1.jpg" style="vertical-align:15px;">方式: 15px</p>
在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表，然后定義如下兩個樣式：
p { font-size: 20px; }img {
border: 1px #990000 solid;
height: 80px;}
在瀏覽器中預(yù)覽測試，可以看出，圖片在垂直方向上發(fā)生了位移，在網(wǎng)站建設(shè)中，當設(shè)置的值為正數(shù)時，圖片向上移動相應(yīng)的數(shù)值；當設(shè)置為負數(shù)時，圖片向下移動相應(yīng)的數(shù)值。
當前文章標題：定義圖片的橫縱向?qū)R
當前URL：http://www.kigisgallery.com/news/wzzz/3103.html
