字体垂直居中的几种实现方法
来源:互联网 发布:ubuntu 查看机器配置 编辑:程序博客网 时间:2024/06/07 16:14
这几天遇到了好多关于字体垂直居中的问题,整理一下,希望对大家也有帮助。
vertical-align:middle
vertical-align 用来指定行内元素(inline)和行内块级元素(inline-block)或表格单元格(table-cell)元素的垂直对齐方式。
inline和inline-block
对于行内元素和行内块级元素,vertical-align
对middle
的处理方式都是一样的。
baseline——基线
元素基线与父元素的基线对齐。
middle——垂直居中
元素中垂线与父元素的基线加上小写x一半的高度值对齐。
当我们对想要垂直居中的元素设置vertical-align:middle
时,往往得不到我们预想的垂直效果。
核心代码:
<style>.va{vertical-align: middle;}div{font-size: 36px;margin: 20px auto;border: 1px dashed #000;text-align: center;}.inline{display: inline;font-size: 12px;border: 1px dashed #000;}</style><div> <span class="va inline">inline垂直居中</span>inline垂直居中</div>
很明显,这个垂直居中的效果没有我们想象中那么好。
但是如果我们改变策略:
把设置vertical-align: middle;
的元素作为标准,周围的文字就会垂直对齐。
更加通俗的讲,就是设置vertical-align: middle;
的元素更大一点,周围的文字元素要更小一点,就能实现周围文字的垂直居中。
核心代码
<style>.va{vertical-align: middle;}div{font-size: 12px;//更改了大小margin: 20px auto;border: 1px dashed #000;text-align: center;}.inline{display: inline;font-size: 36px;//更改了大小border: 1px dashed #000;}</style><div> <span class="va inline">inline垂直居中</span> inline垂直居中</div>
这才是我们想要的垂直居中的效果。
table-cell
baseline——基线 (与sub, super, text-top, text-bottom, <length>, <percentage>
等属性具有同样的效果)
与同行单元格的基线对齐。
middle——垂直居中
单元格垂直居中
本文讨论的是文体垂直居中,该属性的情况就不深入讨论了。
line-height + height
当line-height等于height时,可以实现字体垂直居中。
具体实现:
目标元素(字体)的line-height大小等于父类元素的height大小,可以实现垂直居中。
核心代码:
<style>* { margin: 0;padding: 0;}div{width: 300px;height: 100px;//父类元素高度margin: 20px auto;border: 1px dashed #000;text-align: center;}.lh{font-size:24px;line-height:100px; //目标垂直字体的行高}</style><div> <span class="lh">inline垂直居中</span></div>
行内块级元素垂直居中+vertical-align:top
这种方法比较麻烦,但是适用于更多的场合。
实现过程如下:
1. 更改字体所在的元素为display:inline-block
,position:relative;
2. 设置字体的line-height
与font-size
相等;
3. 设置字体所在元素,top:50%;
,vertical-align:top
,margin-top
为负的font-size
大小的一半。
核心代码
<style>* { margin: 0;padding: 0;} div{width: 300px;height: 100px;margin: 20px auto;border: 1px dashed #000;text-align: center;}.middle{display: inline-block;position:relative;font-size:24px;line-height:24px;top:50%;margin-top:-12px;vertical-align:top; }</style><div> <span class="middle">inline垂直居中</span></div>
实现的思路:
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实现垂直居中的几种方法
- 用css实现垂直水平居中的几种方法
- CSS实现垂直居中的几种方法
- 实现div水平、垂直居中的几种方法
- 【css】实现垂直水平居中的几种方法
- CSS实现水平垂直居中的几种方法
- css实现水平垂直居中的几种方法
- 纯CSS实现垂直居中的几种方法
- 纯CSS实现垂直居中的几种方法
- css 实现div垂直居中的几种方法
- 纯CSS实现垂直居中的几种方法
- div 垂直 居中的几种 方法
- 图片垂直居中的几种方法
- Rup(Rationl Unifide Process)
- **[netty内存管理]netty
- 移动端布局
- windbg-!address、!vadump、!vprot(读取内存状态)
- HDU
- 字体垂直居中的几种实现方法
- 博客地址已转移至http://blog.itttl.com
- 用shell脚本实现监控程序自动重启
- dfs
- Vue + ElementUI 手撸后台管理网站基本框架(一)创建项目
- Toast弹出信息
- 减少 per-cpu kthreads引发的系统抖动
- 大端和小端
- 低碳生活大奖赛