vertical-align
属性值 效果
baseline 基线对齐
top 顶部对齐
middle 中心对齐
bottom 底部对齐 
使用案例1：百度搜索框左边和右边底部没有对齐

使用vertical-align：top;/vertical-align:bottom; 之后效果

案例,html结构代码：

<body>

    <input type="text" ><input type="button" value="百度">

</body>

CSS 结构代码

    <style>
       input{
           height: 50px;
           box-sizing: border-box;
           vertical-align: bottom; /*或者使用float：left*/
       }
    </style>
案例2：图片和文本框默认没有对齐

解决之后：

html 结构代码：
        <body>
             <img src="./images/" alt=""><input type="button" value="百度">
       </body>
CSS结构代码：

   <style>

       img{

           vertical-align: bottom;

       }

    </style>
案例3：div中的文本框是无法贴顶部的

使用之后效果

html结构代码：

     <div class="father">

       <div class="son"></div>

    </div>
CSS结构代码：

  <style>

        .father{

            width: 200px;

            height: 200px;

            background-color: pink;

        }

        input {

            vertical-align: top;

        }

    </style>
案例4： div 不设置高，有内容撑开；此时img标签下面有缝隙存在；浏览器默认图片和文字基线对齐方式，所以理由空间

使用vertical-align之后

html 结构代码：

    <div class="father">

       <img src="./images/code.jpg" alt="">

   </div>
CSS结构代码：

  <style>

        .father{

            width: 400px;

            background-color: pink;

        }

        img {

            vertical-align: top;/*或者转换为块元素来消除行内元素和行内块元素所带来的影响：display:block*/

        }

    </style>
案例5：利用line-height将div内的img垂直居中对齐（只对行内元素和行内块元素生效）

html 结构代码

   <div class="father">

       <img src="./images/code.jpg" alt="">

   </div>
CSS结构代码

    <style>

        .father{

            width: 600px;

            height: 600px;

            background-color: pink;

            line-height: 600px ;

        }

        img {

            vertical-align: middle;

        }

    </style>

CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例的更多相关文章

  1. 元素显示模式：块元素 & 行内元素 & 行内块元素

    元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...

  2. 使用float和display:block将内联元素转换成块元素的不同点

    使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联 ...

  3. 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

    今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素displ ...

  4. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  5. 行内块和文字垂直对齐vertical-agign

    vertical-align 垂直对齐 (对于块级元素无效,主要用来控制表单或者图片与文字对齐的) 图片和文字默认是基线对齐 属性: baseline 基线 top 顶线 middle 中线 bott ...

  6. （转自MDN）CSS基础一定要看的包含块（containing block）

    之前在写<个人常用的水平居中方法>这篇文章的时候,百分比问题涉及到了包含块(containing block)这个概念. 今天刷面试题的时候,又看到了containing block这个词 ...

  7. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  8. HTML&CSS基础学习笔记1.25-input标签隐藏元素

    隐藏元素 有时候我们编写前端代码的时候,可能需要把一些数据告诉后台,但是这些数据又不想让用户看到,我们可以设置<input>标签的[type]属性为"hidden". ...

  9. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

随机推荐

  1. tomcat之nginx调度

    # :安装nginx [root@nginx ~]# yum install nginx -y #配置 [root@nginx ~]# vim /etc/nginx/nginx.conf upstre ...

  2. Initialization of data members

    In C++, class variables are initialized in the same order as they appear in the class declaration. C ...

  3. js - 日期、时间 Date对象方法

    Date 是 JS 内置的日期构造函数 var d = new Date();  // 这个是系统当前时间的日期实例 d.getYear(); // 返回 d 实例年份 - 1900 d.getFul ...

  4. 持续部署CI/CD

    一.简介 在敏捷开发时,通常将服务进行拆分成不同模块,每个开发小组负责一个模块的开发,会在一天内对这个模块进行频繁的提交到仓库主干并部署到线上.CI/CD就是在开发中使用工具保证快速并稳定上线的方法, ...

  5. Log4j2又爆雷！2.16.0存在DOS风险，升级2.17.0可解决

    本以为,经过上周的2.16.0版本升级,Log4j2的漏洞修复工作,大家基本都要告一段落了. 万万没想到,就在周末,Log4j官方又发布了新版本:2.17.0 该版本主要修复安全漏洞:CVE-2021 ...

  6. Python的动态语言特性； __slots__属性

    python是动态语言 1. 动态语言的定义 动态编程语言 是 高级程序设计语言 的一个类别,在计算机科学领域已被广泛应用.它是一类 在运行时可以改变其结构的语言 :例如新的函数.对象.甚至代码可以被 ...

  7. Linux C++获取磁盘剩余空间和可用空间

    完整源码 #include <sys/statfs.h> #include <string> #include <iostream> #include <li ...

  8. cmake以源码的方式引入第三方项目

    最前 本文将介绍一种以源码的方式引入第三方库的方法 准备 主项目,需要引用第三方库的某些函数 第三方库,以源码的形式提供给主项目使用 注意: 本文的背景:已经将第三方源码下载好. 一个例子 我这里准备 ...

  9. 【LeetCode】329. Longest Increasing Path in a Matrix 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/longest- ...

  10. 【LeetCode】417. Pacific Atlantic Water Flow 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/pacific- ...