垂直文字居中
来源:互联网 发布:ff14猫女捏脸数据 御姐 编辑:程序博客网 时间:2024/06/08 03:49
vertical-align:middle
vertical-align 用来指定行内元素(inline)和行内块级元素(inline-block)或表格单元格(table-cell)元素的垂直对齐方式。
inline和inline-block
对于行内元素和行内块级元素,vertical-align
对middle
的处理方式都是一样的。
baseline——基线
元素基线与父元素的基线对齐。
middle——垂直居中
元素中垂线与父元素的基线加上小写x一半的高度值对齐。
当我们对想要垂直居中的元素设置vertical-align:middle
时,往往得不到我们预想的垂直效果。
核心代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
很明显,这个垂直居中的效果没有我们想象中那么好。
但是如果我们改变策略:
把设置vertical-align: middle;
的元素作为标准,周围的文字就会垂直对齐。
更加通俗的讲,就是设置vertical-align: middle;
的元素更大一点,周围的文字元素要更小一点,就能实现周围文字的垂直居中。
核心代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
这才是我们想要的垂直居中的效果。
table-cell
baseline——基线 (与sub, super, text-top, text-bottom, <length>, <percentage>
等属性具有同样的效果)
与同行单元格的基线对齐。
middle——垂直居中
单元格垂直居中
本文讨论的是文体垂直居中,该属性的情况就不深入讨论了。
line-height + height
当line-height等于height时,可以实现字体垂直居中。
具体实现:
目标元素(字体)的line-height大小等于父类元素的height大小,可以实现垂直居中。
核心代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
行内块级元素垂直居中+vertical-align:top
这种方法比较麻烦,但是适用于更多的场合。
实现过程如下:
1. 更改字体所在的元素为display:inline-block
,position:relative;
2. 设置字体的line-height
与font-size
相等;
3. 设置字体所在元素,top:50%;
,vertical-align:top
,margin-top
为负的font-size
大小的一半。
核心代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
实现的思路:
1. 将字体放置到一个行内块级元素中
2. 将行内块级元素垂直居中
细节说明:
display:inline-block
让span
元素变成一个行内块级元素,配合position:relative;top:50%;margin-top:-12px;
可以实现块级元素垂直居中。font-size
与line-height
相等是为了保证span
元素的高度不被行间距所影响,高度只由font-size
控制,方便了margin-top
的设置。vertical-align:top
是为了保证字体是顶格的,让文体看起来更像是垂直居中。
前两条估计大家都懂,我来详细说说最后一条vertical-align:top
。
vertical-align:top
把元素的顶端与行中最高元素的顶端对齐。
我们先来看看
vertical-align:baseline | middle | top 这三种的效果。
基线的效果:
中线的效果:
顶线的效果:
我们可以这样想象:
由于我们设置了position:relative;top:50%;margin-top:-12px;
,这相当于从上向下排列元素。
如果我们要保证字体也垂直居中,也必须字体在元素内部的从上到下排列(也就是所说的顶格),所以需要设置vertical-align:top
。
- 文字垂直居中效果
- 文字垂直居中
- [转]文字垂直居中
- CSS 文字 垂直 居中
- css 文字垂直居中
- 实现文字垂直居中
- UITextField 文字垂直居中
- html文字垂直居中
- CSS文字垂直居中
- 元素、文字垂直居中
- 元素、文字垂直居中
- 文字垂直居中
- 垂直文字居中
- 关于文字的垂直居中
- 图片和文字垂直居中
- input文本框文字垂直居中
- div中文字垂直居中
- div中文字垂直居中
- Nginx使用教程(一)
- 第70讲 static关键字静态变量
- 控制流程
- java-面试
- spring-mvc 体系结构
- 垂直文字居中
- 第71+72+73+74讲 static静态方法+面向对象三大特征(1)
- python numpy库下的几个东东
- Retrofit网络请求框架
- 接口文档管理工具-Postman、Swagger、RAP、DOClever对比介绍
- Android常用依赖
- 如何查询和修改Linux操作系统生成core dump文件的默认路径?
- 第75讲 抽象类
- struts2拦截器