CSS中关于vertical-align垂直对齐
一向以来,我对vertical-align的属性都搞的不是太清楚,今天刚好碰到有朋友问我相关的问题,于是自己潜心研究了一番,发现这玩意还真不是个简单的东西,在此我分享的东西都是抛弃脑残的IE的,如果你用的是脑残的IE,请跳过此篇文章。
一、为什么我设置的vertical-align没用?
相信很多前端开发人员都遇到过这个问题,有的时候自己明明写了vertical-align属性值,但就是没效果,归其原因,是因为vertical-align是个比较奇葩的东西,想要让他起作用,就要投其所好。
我们知道css中display属性有三种inline/inline-block/block,在这里面,vertical-align只认识inline-block,也就是说只有给标签添加了display:inline-block属性,vertical-align才会起作用。
二、vertical-align设置的值到底是针对谁的?
vertical-align的值有很多:常见的有baseline(默认)、top(顶部对齐)、text-top(与文本顶部对齐)、middle(居中)、bottom(底部对齐)、text-bottom(与文本底部对齐)。
看下面这段代码:
<div class="box">
<span class="aa"></span>
这是一段文本
</div> <style>
.box{background:red; color:white; padding-left:20px;}
.aa{display:inline-block; width:5px; height:5px; background:blue;}
</style>
默认的情况看起来基本不爽,我们一般还是最常用vertical-align:middle;
<style>
.box{background:red; color:white; padding-left:20px;}
.aa{display:inline-block; width:5px; height:5px; background:blue;vertical-align:middle;}
</style>
加上以后,span小点就跟右边的文字居中对齐了,当你不停的变换vertical-align的值时,你会发现span的垂直对齐方式对相对于它的父级div而言的,所以这一点必须要理解,它的垂直对齐方式和右边的文字没有半毛钱关系。
CSS中关于vertical-align垂直对齐的更多相关文章
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- CSS 布局 - 水平 & 垂直对齐
CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...
- CSS 中的各种居中 (水平、垂直)
导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...
- CSS:CSS 布局 - 水平 & 垂直对齐
ylbtech-CSS:CSS 布局 - 水平 & 垂直对齐 1.返回顶部 1. CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个 ...
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- 【css基础】文本对齐,水平对齐,垂直对齐
先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注 ...
- CSS之垂直对齐
vertical-align: baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text ...
- 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align
一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...
- POI写docx文件table中的单元格水平、垂直对齐
核心示例代码 垂直对齐 XWPFTableCell cell = table.getRow(i).getCell(j); cell.setVerticalAlignment(XWPFTableCell ...
随机推荐
- 《从零開始学Swift》学习笔记(Day 46)——下标重写
原创文章.欢迎转载.转载请注明:关东升的博客 下标是一种特殊属性. 子类属性重写是重写属性的getter和setter訪问器,对下标的重写也是重写下标的getter和setter訪问器. 以下看一个演 ...
- 设计网页录入信息与自己定义server数据接收
需求:设计一个注冊网页用于录入username和登录password.并将数据传入server并显示出来. 1.前言:网页提交的 get 和 post 两种方式. (1)对于get提交方式,以本文中样 ...
- 基于Dragon Board410c 的智能机器人预研-语音识别及定位
转自:http://www.csdn.net/article/a/2016-01-06/15833642 一.前言 机器人是一种可编程和多功能的.用来搬运材料.零件.工具的操作机,智能机器人则是一个在 ...
- Windows下ElasticSearch及相关插件的安装
(1)在官网下载ElasticSearch压缩包.这里我下载的是elasticsearch-1.7.1(下载地址:https://download.elastic.co/elasticsearch/e ...
- ThinkPHP5.0框架开发--第1章 Tp5.0安装
ThinkPHP5.0框架开发--第1章 Tp5.0安装 第1章 Tp5.0 安装 ======================================================== 今 ...
- vuejs2.0 文档
http://vuejs.org/ vuejs2.0 英文文档 https://vuefe.cn/ vuejs2.0 中文文档
- Redis-2-对于key的通用操作
Redis-2-对于key的通用操作 标签(空格分隔): redis del key key1 key2 作用: 删除1个或多个键 返回值: 不存在的key忽略掉,返回真正删除的key的数量 rena ...
- xBIM 高级02 插入复制功能
系列目录 [已更新最新开发文章,点击查看详细] IFC 模型中的合并和删除实体是一个非常重要的任务,因为 IFC 不是一个分层结构.它是一个复杂的结构,具有潜在的循环关系,是一个双向导航.在单 ...
- vue,elementUI切换主题,自定义主题
本文介绍两种elementUI切换主题色的方法 项目示例:http://test.ofoyou.com/theme/ git代码:记得star哦,谢谢 1:官方提供的方法,直接修改scss文件达到修改 ...
- ASP.NET使用MergeInto做数据同步,同步SQLSERVER不同数据库的相同表结构的数据
public string SynchronousData() { ReturnJson Rejson = new ReturnJson(); //将WebConfig中的数据库连接name中的值写进 ...