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

时间：2022-11-14 15:42:34

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一眼显示效果:
从零开始前端学习[23]:img标签的属性和水平对齐的属性vertical-align
默认图片是inline-block类型的，并且它在底部是有默认的空格，以及会解析标签中间的空格

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

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

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

显示如下所示:

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

使用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>

显示效果如下:

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

注意:

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

欢迎持续访问博客
标签：

相关文章