您的位置：首页 > Web前端

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

2017-09-25 21:14 726 查看

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(必须要让所有的标签遵循一个基线，如果不遵循一个基线的话，这个时候属性是无效的)

欢迎持续访问博客
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  img标签特征 水平对齐 middle top bottom
相关文章推荐
新的分享
章节导航