1，vertical-align属性的作用？

　　　　设置元素垂直对齐的方式；

　　2，该属性使用过程的注意点：

　　　　与text-align属性不同，text-align属性是设置给需要对齐元素的父元素的，

　　　　而vertical-align属性是设置给需要对其元素本身的；

　　3，该属性的取值有哪些？

　　　　3.1，top （与顶部对齐）；

　　　　3.2，bottom （与底部对齐）；

　　　　3.3，text-top （与文字顶部对齐）；

　　　　3.4，text-bottom （与文字底部对齐）；

　　　　3.5，baseline （与基线对齐）；

　　　　3.6，middle （与中线对齐）

　　4，具体示例：该示例是通过设置图片六种不同的垂直对齐属性来进行对齐的

　　　　

<style>

        div{

            width: 400px;

            margin: 45px auto;

            font-size: 40px;

            line-height: 100px;

        }

        img{

            height: 80px;

        }

        div:nth-child(1){

            background-color: red;

        }

        div:nth-child(1)>img{

            /*默认对齐方式基线对齐*/

            vertical-align: baseline;

        }

        div:nth-child(2){

            background-color: green;

        }

        div:nth-child(2)>img{

            /*顶部对齐*/

            vertical-align: top;

        }

        div:nth-child(3){

            background-color: blue;

        }

        div:nth-child(3)>img{

            /*底部对齐*/

            vertical-align: bottom;

        }

        div:nth-child(4){

            background-color: pink;

        }

        div:nth-child(4)>img{

            /*文字顶部对齐*/

            vertical-align: text-top;

        }

        div:nth-child(5){

            background-color: skyblue;

        }

        div:nth-child(5)>img{

            /*文字底部对齐*/

            vertical-align: text-bottom;

        }

        div:nth-child(6){

            background-color: brown;

        }

        div:nth-child(6)>img{

            /*中线对齐*/

            vertical-align: middle;

        }

    </style>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vertical-align属性</title>

</head>

<body>

    <div>

        a,基线对齐

        <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">

    </div>

    <div>

        b,顶部对齐

        <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">

    </div>

    <div>

        c,底部对齐

        <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">

    </div>

    <div>

        d,文字顶部对齐

        <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">

    </div>

    <div>

        e,文字底部对齐

        <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">

    </div>

    <div>

        f,中线对齐

        <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg" alt="">

    </div>

</body>

</html>

CSS中的vertical-align属性的更多相关文章

  1. CSS中具有继承性的属性：

    CSS中具有继承性的属性:   color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...

  2. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  3. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  4. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  6. CSS中默认被继承的属性

    在CSS中,所有属性都可以被继承,只需要显式的设置属性值为inherit即可.如果不设置该属性,CSS大部分属性默认不会从父元素继承而是设置初始值(initial value),但是有一部分属性,默认 ...

  7. css 中可以继承的属性

    CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...

  8. css中可以继承的属性

    声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该 ...

  9. CSS中px和em属性的特点与区别

    详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...

  10. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

随机推荐

  1. [bzoj3925] [洛谷P3343] [ZJOI2015] 地震后的幻想乡

    Description 傲娇少女幽香是一个很萌很萌的妹子,而且她非常非常地有爱心,很喜欢为幻想乡的人们做一些自己力所能及的事情来帮助他们. 这不,幻想乡突然发生了地震,所有的道路都崩塌了.现在的首要任 ...

  2. CTF-Keylead(ASIS CTF 2015)

    将keylead下载到本地用7-ZIP打开,发现主要文件 keylead~ 在ubuntu里跑起来,发现是个游戏,按回车后要摇出3,1,3,3,7就能获得flag. 拖进IDA 直接开启远程调试,跑起 ...

  3. 【洛谷4424】[HNOI_AHOI2018]寻宝游戏（我也不知道括号里该写啥）

    题目 洛谷 4424 分析 感觉思路比较神仙. 对于按位与和按位或两种运算,显然每一位是独立的,可以分开考虑. 对于某一位,「与 \(0\)」会将这一位变成 \(0\),「或 \(1\)」会将这一位变 ...

  4. 解决浮点运算精度不准确,BigDecimal 加减乘除

    package com.kflh.boxApi.utils.util; import java.math.BigDecimal; /** * @program: BoxApi * @descripti ...

  5. Excel.Application使用手册

    Excel.Application组件使用方法,适合应用于使用EXCEL组件做WEB应用开发. 转自http://bbs.xtjc.com/thread-376095-1-1.html 定制模块行为( ...

  6. SelectiveSearchCodeIJCV遇到First two input arguments should have the same 2D dimension

    在windows 10+visual studio环境下运行SelectiveSearchCodeIJCV中的demo.m难免会出现下列错误 ----------------------- if(~e ...

  7. Java框架-MyBatis三剑客之MyBatis Generator(mybatis-generator MBG插件)详解

    生成器设计思路: 连接数据库 -> 获取表结构 -> 生成文件 1 下载与安装 官网文档入口 最方便的 maven 插件使用方式 贴至pom 文件 2 新建配置文件 填充配置信息(官网示例 ...

  8. 老哈佛H3的空调控制器的维修记录

    这部哈弗车是2005年出厂的,应该差不多是第一批了吧,小毛病很多了.夏天到了,空调也不能启动,灯不亮,按键没反应令我很是着急.于是开始研究. 这款空调的控制器在cd机中控下面,需要拆中控取出.是一个黑 ...

  9. SpringCloud与微服务Ⅳ --- Rest微服务构建案例工程模块

    一.父工程搭建 父工程pom: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...

  10. Spring框架学习笔记（9）——API接口设计相关知识及具体编码实现

    最近需要设计一个API服务器,想要把API接口搞得规范一下,就通过网上搜集到了一些资料,以下便是自己的一些理解以及相关的具体实现 本文采用的是spring boot+maven的方案 restful规 ...