CSS vertical-algin的使用
一、什么vertical-algin
vertical的意思就是垂直,algin是对齐的意思,连起来就是“垂直对齐方式”,接下来看看vertical-algin有哪些属性,打开浏览器一看
vertical-algin 的属性有这么多,而我们经常用的只有top,bottom,middle三种而已
都是些什么意思呢,看看下面这个图片
1.关于数值
.test{vertical-algin: -2px}
我的理解就是,元素相对于基数向下偏移2px,这个常常用来解决单选框/复选框与12px文字大小不对齐的问题。
2.关于百分数
在css中支持百分数的属性很多,比如 width/height,line-height,font-size,而vertical-algin也是一个具有百分数的属性。提到百分数必然就会问它是相对于谁来说的呢,比如宽度百分比是相对于父级块状元素的宽度,font-size百分比是相对于第一个含有font-size的属性的。而这里的vertical-algin 有点特别,它是相对于 此标签继承的line-height来决定的,比如:
.test {vertical-algin: -10%;}
假如这里的 .test 继承的 line-height 是20px,那么这里的vertical-algin: -10%就代表着 -10% * 20 = -2px; 不过呢,事情并没有想象的那么简单,css中的line-height是一个非常精深的属性,那么在遇到IE6/IE7这种吃三鹿奶粉长大的浏览器肯定会出篓子,什么篓子呢,就是IE6/IE7下的veritical-algin百分数不支持小数line-height,下面看看以小数处理的line-height
关于vertical-algin的其他属性 bottom,middle,可以看看兼容性表
我也不知道欧朋浏览器的full是什么意思,但是我知道其他浏览器都是buggy,bug一堆的意思
简单的研究了一下,在不同的浏览器下差异还是很大的。
不过vertical-algin也不是一无是处,某些属性,比如 text-bottom和middle用来修改一些样式表和一些特定的布局,补充一下baseline,top,middle,bottom,分别代表了基线,顶线,中线,底线
二,为什么我的vertical-algin不起作用
知道了veritical-aldin是垂直对齐的意思,不少人就试着用这个属性实现垂直方向上的对齐效果,但是会发现,有时候有效果,有时候没有效果,这是为什么呢,下面来分析一下原因。
我们知道 display有很多属性,其中以 inline/inline-block/block 为最常见,这代表了页面上三种不同水平的元素。每个人都有自己的嗜好,喜欢不用的东西,而veritical-algin也是一个挑食的家伙,只喜欢 inline-block,所以有时候也称为inline-block依赖型元素。只有一个元素属于inline-block(table-cell也可以看成是inline-block元素),其身上的veritical-algin才会起作用。
虽然vertical-algin只在inline-block的元素上起作用,但是会影响到inline属性的元素,而inline元素受vertical-algin属性位置改变等不是因为其对vertical-align属性敏感或起作用,而是受制于整个line box的变化而不得不变化的。
三、vertical-algin是如何起作用的
CSS vertical-algin的使用的更多相关文章
- CSS 수직 가운데 정렬 (테이블 없이!) Vertical Centering with CSS
이 방법은 테이블처럼 만들어서 테이블의 vertical-align 속성을 사용할 수 있도록 를 몇 개 세팅한다. (테이블의 vertical-align 속성은 다른 요소들에서는 굉장 ...
- HTML: vertical algin Big/small div in same row (bootstrap)
Reference: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=vot ...
- 五种方法让CSS实现垂直居中
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- CSS 居中大全
<center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...
- CSS 居中大全【转】
我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...
- CSS 垂直居中的5种实现方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些 ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- 转: css实现垂直居中的方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...
- 通过CSS显示垂直文本
原文链接: CSS Vertical Text 原文日期: 2014年03月18日 翻译日期: 2014年3月22日 翻译人员: 铁锚 示例地址: http://davidwalsh.name/dem ...
- CSS 居中大全(转)
引用:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ CSS 居中大全 AUG 13TH, 2013 | ...
随机推荐
- if-else和while循环
用户登陆验证: if-else 判断 #!/usr/bin/env python # -*-coding:utf-8 -*- import getpass passwd=' name='sunhao' ...
- select语句的高级应用及实例
本文介绍的select高级应用主要包括:联合查询.分组查询.嵌套查询和限定查询数目等,与实例对照演示,所使用数据库为sqlite3. 部门表(dept) CREATE TABLE dept( id I ...
- springBoot AOP学习(一)
AOP学习(一) 1.简介 AOp:面向切面编程,相对于OOP面向对象编程. Spring的AOP的存在目的是为了解耦.AOP可以让一切类共享相同的行为.在OOP中只能通过继承类或者实现接口,使代码的 ...
- matlab调用规则变量名eval函数
eval 函数运用!! 经常会遇到matlab里面有些变量命名其实有一样的规律,,但是不像矩阵这些是可以通过循环来获取的,这个时候就可以利用eval语句了: 首先,假设现在有10个名称类似的变量, ...
- webgl,threejs教程、笔记
发现一个不错的博客,学学. webgl和threejs教程
- [LeetCode&Python] Problem 541. Reverse String II
Given a string and an integer k, you need to reverse the first k characters for every 2k characters ...
- [LeetCode&Python] Problem 429. N-ary Tree Level Order Traversal
Given an n-ary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
- python 加密 hashlib与hmac模块
https://www.jb51.net/article/128911.htm hashlib模块简介: hashlib模块为不同的安全哈希/安全散列(Secure Hash Algorithm)和 ...
- 20155219 《Java程序设计》实验一(Java开发环境的熟悉)实验报告
一.实验内容及步骤 1.使用JDK编译.运行简单的java程序 先在命令行中按老师要求输入,之后编译运行,如下图. 具体代码如下: package src.shiyan1; import java.u ...
- MyBatis 遍历数组放入in中
必须要遍历出数组的值放入in中 如果直接将"'2','3','4','5','6','7','8'" 字符串放入in中,只会查出 inv_operate_type的值为2的数据,因 ...