CSS 设置了line-height等于行高之后文字未垂直居中

    <style>.box {/* box-sizing 属性是防止盒子由于边框和内边距被撑大 */box-sizing: border-box;  width: 100px;height: 100px;background-color: pink;border: 10px solid skyblue;/* 行高等于盒子高度 是为了使文字垂直居中 */line-height: 100px;}</style>

<body><div class="box">文字</div>
</body>

上述代码的结果：

发现文字并没有垂直居中

文字垂直居中的原理：

line-height(行高)=文字高度+上空隙+下空隙（上空隙=下空隙）

当line-height=height 的时候文字被挤到中间，就是垂直居中

box-sizing: border-box：

box-sizing 属性是防止盒子由于边框和内边距被撑大
增加该属性后 height=height（原来的）+padding+border

如果有padding值和border边框值
此时line-height=height(现在的) 后，文字并没有被挤到中间，而是偏下

解决办法：

line-height的值等于原来的height值（现在的height值-padding-border）

CSS 设置了line-height等于行高之后文字未垂直居中相关推荐

android怎么调textview间距,Android如何设置TextView的行间距、行高。
Android系统中TextView默认行间距比较窄,不美观. 我们可以设置每行的行间距,可以通过属性android:lineSpacingExtra或android:lineSpacingMulti ...
Android如何设置TextView的行间距、行高
Android如何设置TextView的行间距.行高. 转载链接:点击 Android系统中TextView默认行间距比较窄,不美观. 我们可以设置每行的行间距,可以通过属性android:lin ...
CSS字体设置的一些技巧（行高，加粗，强制换行等）
文本是网页中最重要的一种内容形式,文本几乎可以写在任何地方,块级元素中可以写行内元素中也可以写.文本都是由一个个字符组成的,在css布局中,每一个字符都有一个em框,通常font-size设置的大小就 ...
excel2010设置列宽为像素_使用像素单位设置 EXCEL 列宽或行高
在导出 Excel 的时候, 经常要需要给列设置宽度或给行设置高度, 在使用 NPOI 或 EppPlus 等组件进行操作的时候, 列宽和行高的单位都不是像素, 好像是英寸,具体是啥也说不清. 平常在 ...
POI导出Excel：设置字体、颜色、行高自适应、列宽自适应、锁住单元格、合并单元格...
点击关注公众号,利用碎片时间学习 1. 前言 poi框架可以支持我们在java代码中, 将数据导出成excel , 在实际开发中, 往往还需要设置excel字体,颜色,行高,列宽等属性, 有时候还需要 ...
poi通过设置，固定Excel的行高和列宽
目录 1.poi中设置行高 2.poi中设置列宽 1.poi中设置行高在poi中可以使用HSSFRow.setHeight(short s)方法设置行高: row.setHeight((short) ...
python openpyxl 自动设置excel列宽及行高，单元格对对齐方式
import pandas as pd from openpyxl import load_workbook from openpyxl.utils import get_column_letter ...
css设置datatable表格奇偶数行或者奇偶数列背景色不同
奇偶数行背景色不同: /*设置表格奇偶数行背景色不同*/ .table-responsive table tbody tr:nth-child(even){background: rgba(250,2 ...
TextView字重、行高、文字间距相关的一些api
所有图左边是原图,右边是设置了属性后的图,括号末尾是设置的参数文字大小:18dp 1.android:letterSpacing(字母之间的间距,横向,android:letterSpacing=& ...

CSS 设置了line-height等于行高之后文字未垂直居中

文字垂直居中的原理：

box-sizing: border-box：

解决办法：

CSS 设置了line-height等于行高之后文字未垂直居中相关推荐

最新文章

热门文章