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. vue-cli安装记录

    docker安装 docker network rm  mydkdocker network create --subnet=192.168.1.0/24 mydk cat centos-7-x86_ ...

  2. linux 配置本地yum

    1.挂载光盘 #挂载光盘 mount /dev/cdrom /mnt/cdrom 2.修改yum.conf, 运行 vi /etc/yum.conf,文件替换成如下内容 [main] cachedir ...

  3. Linux:spool命令

    格式调整有以下参数: set echo on/off--是否显示脚本中的需要执行的命令 set feedback on/off--是否显示 select 结果之后返回多少行的提示 set linesi ...

  4. i++ 和 ++i 探究原理

    先看一个例子: package com.test; public class AutoIncrement { public static void main(String[] args) { int ...

  5. 【JAVA今法修真】 第三章 关系非关系 redis法器

    您好,我是南橘,万法仙门的掌门,刚刚从九州世界穿越到地球,因为时空乱流的影响导致我的法力全失,现在不得不通过这个平台向广大修真天才们借去力量.你们的每一个点赞,每一个关注都是让我回到九州世界的助力,兄 ...

  6. Docker从入门到精通（三）——概念与执行流程

    前面我们大概介绍了docker是什么以及如何安装docker,但是对里面出现的一些名词,可能大家还不熟悉,这篇文章就来为大家解惑. 1.容器化平台 Docker 是提供应用打包,部署与运行应用的容器化 ...

  7. Mysql配置文件 binlog和慢日志

    目录 binlog binlog_format log_slave_updates log-bin|log-bin-index expire_logs_days relay-log|relay-log ...

  8. LuoguP7714 「EZEC-10」排列排序 题解

    Content 给定一个 \(1\sim n\) 的一个排列 \(p\),你每次可以选择一个区间 \([l,r]\) 并花费 \(r-l+1\) 的代价将下标在这个区间内的所有数升序排序,求使得排列 ...

  9. WebApi的前端调用

    WebApi前端调用 HTML代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  10. Java 常用类库一，main方法传参String[] args；获取输入Scanner ；hasNext()；hasNextInt()

    1. main方法传参 package com.zmd.common_class_libraries; /** 给mian方法传参测试 */ public class MainArgsTest { p ...