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. Spring MVC与html页面的交互（以传递json数据为例）

    一.导入相jar包 主要包括spring相关jar包和fastjson jar包,具体步骤略. 二.配置相关文件 1.配置web.xml文件 <?xml version="1.0&qu ...

  2. 一个超简单的Microsoft Edge Extension

    这个比微软官网上的例子简单很多,适合入门.总共4个文件: https://files.cnblogs.com/files/blogs/714801/cet6wordpicker.zip 36KB 1. ...

  3. BUUCFT pwn asis2016_b00ks

    看师傅们wp的时候,我才知道这个道题是wiki上面的例题.我看了一些师傅的wp,发现大家都是一种做法,都是通过mmap堆地址,来找libc基地址的.而我试了一下fastbisn attack,发现也可 ...

  4. C语言程序设计：二分查找（折半查找）

    目录 C语言程序设计:二分查找(折半查找) 1.什么是二分查找 2.二分查找的优点 3.二分查找的缺点 4.二分查找原理 5.源代码实现 6.后话 C语言程序设计:二分查找(折半查找) 1.什么是二分 ...

  5. CF1579A Casimir's String Solitaire 题解

    Content 给定一个仅包含 A.B.C 三种字符的字符串 \(s\),有如下两种操作: 删除字符串中的恰好一个 A 和恰好一个 B. 删除字符串中的恰好一个 B 和恰好一个 C. 求是否能够把字符 ...

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

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

  7. CSS 常用颜色代号

    常用颜色代号一览表:http://www.divcss5.com/html/h636.shtml   #000000   #2F0000   #600030   #460046   #28004D   ...

  8. libevent源码学习（11）：超时管理之min_heap

    目录min_heap的定义向min_heap中添加eventmin_heap中event的激活以下源码均基于libevent-2.0.21-stable.       在前文中,分析了小顶堆min_h ...

  9. 优雅的按键模块-----Multi-button

    优雅的按键模块-----Multi-button ​ 在我们日常开发和使用的过程中常常使用了一些按键,利用按键实现不同的功能,比如长按,短按,双击等等.但是每次都是采用标志等等来实现信息的读取,是否有 ...

  10. ACwing2.01背包问题

    题目: 有 N 件物品和一个容量是 V 的背包.每件物品只能使用一次. 第 i 件物品的体积是 vi,价值是 wi. 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大. 输出最 ...