css之line-height及图片文字垂直居中

时间:2021-04-17 11:54:44

css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com

行高line-height用到的频率极高,指一行文字的高度(两行文字间基线的距离)就像英文本子里的 倒数第二条线。

line-height与line boxes高度

css中起着高度作用的heigh以及line-height,如果一个便签没有定义height属性,那么最终表现的高度一定是line-height起作用。

一个空的<div></div>,没有设置高度,但在元素内添加文字,这个div就有了高度,我一直以为就是文字把div撑起来了啊,但事实并非如此。真正撑起高度的是line-height。

<div class="test1">测试</div>
<div class="test2">测试</div>
css:
.test1{ font-size: 20px;   border: 1px solid #ccc;   background: #eee;   line-height: 0px; }
 
.test2{ font-size: 0px;    border: 1px solid #ccc;   background: #eee;   line-height: 20px; }
css之line-height及图片文字垂直居中

有图有真相的证明了真正撑起div的高度的不是文字内容,而是line-height。

那到底line-height行高是怎么产生高低的?在inline box 模型中。有个lineboxes(是看不见的,作用就是包裹文字),一行文字一个line boxes(每行文字都有一个line boxes包裹)。line boxes并没有什么特性,就高度。所以一个没有设置height属性的div的高度就是由一个个line boxes 的高度堆积而成的。

但line boxes的高度真正取决于里面的inline boxes。图片,文字,<span>便签等带inline属性的标签。他看哪个inline boxes的实际line-height值最高,最高个的那个line-height值作为line boxes的高度

行高的垂直居中性

上面那张测试的图,证明,无论你文字是大还是小,其占据空间都是文字内容的公共水平中垂线。即使line boxes的高度为0,但他的文字的水平中垂线对称分布,这一特性可以实现文字或图片的垂直居中对齐。

文字或图片垂直居中对齐问题
单行文字垂直居中:设置line-height。
一直一来我们记得但文本居中的方法height与line-height等高,但其实直接设置line-height就可以,那个height是多余的。
多文本垂直居中:
p{
  line-height: 150px;
  border: 1px dashed #ccc;
}
span{
  display: inline-block;       /*将多行文本当一行处理*/
  line-height: 1.4em;         /*line-height具有继承性,需要重新设置*/
  vertical-align: middle;     /*中间线对齐*/
}
<p>
  <span>line-height为150px,font-size:12px<br>这里是第二行用来测试多行的显示效果</span>
</p>

多图片垂直居中

因为多图片,但img不支持浮动,所有外面在套一层

方法1     图片北京定位法:background-position:center:

ul li {
  width: 1em; /*根据font-size*/
  height: 1em;
  padding: 0.1em;
  margin: 0 0.1em 0 0;
  font-size: 128px;
  float: left;
  border: 1px solid #beceeb;
}
ul li img {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

方法2    display:table-cell法

ul li {
  float: left;
  margin-right: 13px;
}
ul li div {
  display: table-cell;
  width: 144px;
  height: 144px;
  border: 1px solid #beceeb;
  font-size: 118px;
  text-align: center;
}
ul li div img {
  vertical-align: middle;
  width: 100px;
  height: 100px;
}
<ul>
  <li>
    <div>
      <img src="background.png" />
    </div>
  </li>
</ul>
方法3:inline-block垂直对齐    此方法只使用与多种图片对齐,如果只有一张图片,那就只能与空格对齐了
 
a{

display: inline-block;

width: 200px;

text-align: center;

vertical-align: center;

border: 1px solid peru;

}
img{
vertical-align: middle;
border: 1px solid red;
}
.one{
width: 100px;
height: 50px;
}
.two{
width: 100px;
height: 100px;
}
<div>
  <a href="#"><img class="one" src="1.jpg" alt=""></a>
  <a href="#"><img class="two" src="2.jpg" alt=""></a>
</div>