定义图片的横纵向对齐-盈岚科技

在网页设计中，图片的横向对齐和文字的横向对齐方法基本相同，分为左、中、右3种。不同的是图片的对齐不能直接通过设置图片的text-align属性来定义，而是需要通过设置其父元素的该属性，使其继承text-align属性来实现。

【示例】新建一个网页，保存为test.html，在<body>标签中输入以下代码，并分别设置align属性调整对齐方式。

<tr>

</tr>

<tr>

</tr>

<tr>

</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>标签内输入如下结构：

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后定义如下两个样式：

p { font-size: 20px; }img {

border: 1px #990000 solid;

height: 80px;}

在浏览器中预览测试，可以看出，图片在垂直方向上发生了位移，在网站建设中，当设置的值为正数时，图片向上移动相应的数值；当设置为负数时，图片向下移动相应的数值。

当前文章标题：定义图片的横纵向对齐
当前URL：http://www.lyjtt.cn/news/wzzz/3103.html

定义图片的横纵向对齐