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. 一个简单的Extjs继承实现

    function extend(sub,sup){ //目地:实现只继承父类的原型对象 //1.用一个空函数据中转,目地进行中转 var F = new Function(); //2.实现空函数的的 ...

  2. Spring Boot中使用模板引擎Thymeleaf

    一.Thymeleaf简介 Thymeleaf[taɪm lif],百里香叶,是一个流行的模板引擎,该模板引擎采用Java语言开发.Java中常见的模板引擎有Velocity.Freemaker.Th ...

  3. BigDecimal中要注意的一些事

    一.关于public BigDecimal(double val) BigDecimal中三个主要的构造函数 1 public BigDecimal(double val) 将double表示形式转换 ...

  4. 【Matlab】线性调频信号LFM 仿真

    [知识点] 生成序列 i = a:step:b 举例: i = 1:1:9 画图(子图) subplot(m,n,p)或者subplot(m n p) 总结起来就是,画一个m行n列的图. p表示在第p ...

  5. 3、Spring的DI依赖注入

    一.DI介绍 1.DI介绍 依赖注入,应用程序运行依赖的资源由Spring为其提供,资源进入应用程序的方式称为注入. Spring容器管理容器中Bean之间的依赖关系,Spring使用一种被称为&qu ...

  6. [BUUCTF]REVERSE——[WUSTCTF2020]level2

    [WUSTCTF2020]level2 附件 步骤: 例行检查,32位程序,upx壳儿 脱完壳儿,扔进32位ida,习惯性的检索字符串,在我没找到什么关键信息,准备去看main函数的时候,将字符串拉到 ...

  7. 【WP】【web】中学生CTF | web部分wp

    $_GET 源码: <?php show_source(__FILE__); include 'config.php'; if(!isset($_GET['args'])){ die(); } ...

  8. Table.ReverseRows反转…Reverse…（Power Query 之 M 语言）

    数据源: 任意五行两列 目标: 将原排列顺序颠倒 操作过程: [转换]>[反转行] M公式:  = Table.ReverseRows( 表 ) 扩展: 反转列表:= List.Reverse( ...

  9. LuoguB2102 计算鞍点 题解

    Content 给定一个 \(5\times 5\) 的矩阵,请在这个矩阵中找出一个元素,使得这个元素既是它所在行的最大值,也是它所在列的最小值. Solution 如果直接暴力枚举每一个元素,再去算 ...

  10. 金山云 KS3 Python SDK 多线程并发上传文件；下载断点续传 参考脚本

    并发上传 基于py自带模块 concurrent.futures import ThreadPoolExecutor #!/usr/bin/env python3 # -*- coding:utf-8 ...