css之line-height及图⽚⽂字垂直居中
⾏⾼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; }
有图有真相的证明了真正撑起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{css设置文字垂直居中
  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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。