<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          定义图片的横纵向对齐

          • 2019-09-26 14:35:24
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          网页设计中,图片的横向对齐和文字的横向对齐方法基本相同,分为左、中、右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;}

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

          当前文章标题:定义图片的横纵向对齐

          当前URL:http://www.1c4w.com/news/wzzz/3103.html

          上一篇:在网页设计中定义图片大小

          下一篇:设置文字环绕

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图