很多时候, 文字和 input和button它们的 顶端是在同一条先上, 但是并不是 垂直居中对齐, 这个 就不好看.
其时有很多理论, 讲的也很复杂, 说什么文本 的top, middle ,baseline , bottom 四根线, 等等 那些我们都不管, 可以这样简单的理解:
- 把文本/input输入框/button等 都看作是放在 各自一个盒子中的东西, 默认的时候: 当它们在同一行中时, 这些盒子的顶端是对齐的, 即顶端是在同一根线上, 顶端是对齐的, 是盒子不一定是文本顶端对齐; 而且各自盒子 里面的东西(文字) 是在各自盒子的垂直中间的
- 但是, 问题的根本就在于 这些盒子的 高度 是不同的! 你可以想象一下, 不同高度的盒子, 盒子顶端放在一样高度时, 里面的东西都处于盒子的一半高度时, 盒子里的东西肯定不在同一个高度, 肯定是高的高, 低的低
- 那要解决盒子里面的东西(即各自的文字) 在同一个高度, 方法就是 : 让这些盒子的 高度都一样! 各个盒子的高度设置方法是:
- 对于单纯的文字, 所在的容器(盒子), 高度的设置就是设置 文本 的 行高! 即 line-height: .....px
- 对于input和按钮, 它们的高度, 没有具体的设置方法, 那就是在 firefox的 调试器的 相应html元素的 css的 computed标签页里面可以 得到的: 基本就是 = 自身文本height + 上下padding的和. 你可以根据相应元素的 css值计算, 也可以根据computed上的值 直观的相加得到
- 比如 bs的按钮的高度就是: 按钮中的文字的高度是 20px; 按钮内文字还有上下padding是6px, 所以按钮的高度就是 32px;
所以, 设置 文本所在的 span的 行高为 32px, 就刚好能保证 文本和button(实际上button中的文字)在(基本上, 不保证绝对)同一高度,就是在高度上基本垂直居中对齐. - 所以说, bs中的行高1.428, 基本上就是 20px, bs的文档中说的,
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）它说1/2行高(即10px), 就说明默认 的 行高是 20px;
其他高度尺寸 直接从调试器computed上看.
原文地址：https://www.cnblogs.com/bkylee/p/12384783.html
时间： 2024-10-07 00:58:47