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. Function overloading and return type

    In C++ and Java, functions can not be overloaded if they differ only in the return type. For example ...

  2. Reactor之发射器（Flux、Mono）转换操作函数

    数据合并函数 由于业务需求有的时候需要将多个数据源进行合并,Reactor提供了concat方法和merge方法: concat public static <T> Flux<T&g ...

  3. java异常处理中throws和throw的使用

    异常介绍: 运行时异常.非运行时异常 在编写可能会抛出异常的方法时,它们都必须声明为有异常. 一.throws关键字 1.声明方法可能抛出的异常: 2.写在方法名后面: 3.可声明抛出多个异常,异常名 ...

  4. vivo浏览器的快速开发平台实践-总览篇

    一.什么是快速开发平台 快速开发平台,顾名思义就是可以使得开发更为快速的开发平台,是提高团队开发效率的生产力工具.近一两年,国内很多公司越来越注重研发效能的度量和提升,基于软件开发的特点,覆盖管理和优 ...

  5. 解决用creact-react-app新建React项目不支持 mobx装饰器模式导致报错问题 。

    创建react项目 create-react-app mobx-demo cd my-app npm run start 使用react-app-rewired npm install customi ...

  6. KNN分类

    1. KNN简介 K近邻(K-Nearest Neighbor)简称KNN.它可以做分类算法,也可以做回归算法.个人经验:KNN在做分类问题时非常有效. 2. KNN算法思想 在样本空间中,我们认为两 ...

  7. CF950A Left-handers, Right-handers and Ambidexters 题解

    Content 有 \(l\) 个人是左撇子,有 \(r\) 个人是右撇子,另外有 \(a\) 个人既惯用左手又惯用右手.现在想组成一个队伍,要求队伍中惯用左手的人和惯用右手的人相等,试求出团队里面的 ...

  8. java 图形化小工具Abstract Window Toolit 菜单项

    AWT 中的菜单由如下几个类组合而成 MenuBar: 菜单条,菜单的容器. Menu: 菜单组件,菜单项的容器,它也是Menultem的子类,所以可作为菜单项使用. PopupMenu: 上下文菜单 ...

  9. netcore XmlDocument 使用Load和Save方法

    string path ="C://xxx/file" XmlDocument xmlDoc = new XmlDocument(); #if NET462 xmlDoc.Load ...

  10. 【LeetCode】1417. 重新格式化字符串 Reformat The String

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 栈 日期 题目地址:https://leetcode- ...