从零开始前端学习[23]:img标签的属性和水平对齐的属性vertical-align

来源：互联网发布：笔顺数据库编辑：程序博客网时间：2024/05/22 13:37

img标签的属性和垂直属性vertical-align

img标签的特征
vertical-align水平对齐的属性

提示：
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

img标签的特征

img标签顾名思义，也就是图片的标签，之前简单讲过img标签，但是对img标签也就是一带而过,img是一个单标签

<img src="url" title="名称" alt="加载失败显示数据"/>

特征:

img标签支持宽高，如果没有宽高的时候，这个时候就默认为图片本身的大小，如果只给宽度，那么高度也是自适应的，如果只给高度，那么宽度也是自适应的
img标签之间的间隙是会被解析的，包括图片下面也有默认的间隙
支持margin，但是不会支持margin:auto;
支持text-align:center居中
能够设置vertical-align属性

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px;margin: 50px auto;box-shadow: 0 0 10px 0 deeppink}    .main .box1{text-align: center;margin: auto}    .main .box1 img{width: 200px;border: 1px solid red;}    /*.main .box1 .img2{width: 300px; vertical-align: bottom}*/  </style></head><body>  <div class="main">    <div class="box1">      <img class="img1" src="../课件源码/课件源码/img/1.jpg" alt="">      <img class="img2" src="../课件源码/课件源码/img/1.jpg" alt="">    </div>  </div></body></html>

先low一眼显示效果:
这里写图片描述
默认图片是inline-block类型的，并且它在底部是有默认的空格，以及会解析标签中间的空格

使用vertical-align来消除这样的一种空格

在上面的案例中做一个小小的修改:

  .main .box1 img{width: 200px;border: 1px solid red;vertical-align: bottom}

显示如下所示:

这里写图片描述

使用vertical-align的形式可以去除掉img的默认的样式。
vertical-align（可以去除图片的默认的间隙，无论值是什么都无所谓）

vertical-align水平对齐的属性

定义：定义行级元素的基线相对于该元素所在的基线的垂直对齐，这个所谓的基线，也就是相对找到一个标准，这个标准是沿着上部，中部，底部
使用的范围：行级(inline) 行快级(inline-block) img

关于vertical-align垂直对齐的相关属性:

属性值属性值的含义 top 相对于元素的顶端中最高的元素对齐 middle 放在此元素的中部 bottom 放在此元素的底部

对上面的图片案例进行一种修改:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px;margin: 50px auto;box-shadow: 0 0 10px 0 deeppink}    .main .box1,.main .box2,.main .box3{text-align: center;margin: auto;border: 1px solid greenyellow}    .main img{width: 200px;border: 1px solid red;}    .main .box1 .img1{vertical-align: top}    .main .box1 .img2{width: 300px; vertical-align: top}    .span1{vertical-align: top}    .main .box2 .img3{vertical-align: middle}    .main .box2 .img4{width: 300px; vertical-align: middle}    .span2{vertical-align: middle}    .main .box3 .img5{vertical-align: bottom}    .main .box3 .img6{width: 300px; vertical-align: bottom}    .span3{vertical-align: bottom}  </style></head><body>  <div class="main">    <div class="box1">      <span class="span1">顶部对齐</span>      <img class="img1" src="../课件源码/课件源码/img/1.jpg" alt="">      <img class="img2" src="../课件源码/课件源码/img/1.jpg" alt="">    </div>    <div class="box2">      <img class="img3" src="../课件源码/课件源码/img/1.jpg" alt="">      <span class="span2">中部对齐</span>      <img class="img4" src="../课件源码/课件源码/img/1.jpg" alt="">    </div>    <div class="box3">      <img class="img5" src="../课件源码/课件源码/img/1.jpg" alt="">      <img class="img6" src="../课件源码/课件源码/img/1.jpg" alt="">      <span class="span3">底部对齐</span>    </div>  </div></body></html>

显示效果如下:

这里写图片描述

注意:

vertical-align属性支持的标签需要时行级元素，行块级元素或者img标签
vertical-align要让哪些元素居什么显示，所有的元素都要写上vertical-align(必须要让所有的标签遵循一个基线，如果不遵循一个基线的话，这个时候属性是无效的)

欢迎持续访问博客

阅读全文

1 0