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

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

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

line-height与line boxes高度

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

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

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; }

有图有真相的证明了真正撑起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是多余的。

多文本垂直居中：

　　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>

</div>

</li>

</ul>

方法3：inline-block垂直对齐此方法只使用与多种图片对齐，如果只有一张图片，那就只能与空格对齐了

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>

</div>

转载于:https://www.cnblogs.com/jiaobaba/p/10467399.html

css之line-height及图片文字垂直居中相关推荐

css图片跟文字居中,css 图片文字垂直居中
先来看张图片相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
利用vertical-align实现图片文字垂直居中对齐（HTML、CSS）
利用vertical-align实现图片文字垂直居中对齐(HTML.CSS) <!DOCTYPE html> <html lang="en"><hea ...
html不知道高文字垂直居中,css实现固定高度及未知高度文字垂直居中的完美解决方案...
在工做当中咱们常常碰到相似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而咱们最容易会想到使用表格来垂直居中,或者若是是单行文字 ...
【CSS】CSS元素显示模式display + 网页单行文字垂直居中小技巧
写在前面,作者首页有前端专栏,详细分享相关知识,有兴趣的不妨点个收藏 ~~~~ CSS元素显示模式display 标签显示模式是标签以什么方式进行显示.HTML标签一般分为块标签和行内标签两种类型,它 ...
CSS - 使表格td中的文字垂直居中
文字垂直居中的有如下的方法方法一: valign:middle // 不推荐使用代码如下: <table> <tbody> <tr> <td valig ...
css实现瀑瀑流-图片文字实现自适应效果
代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
html li内文字垂直居中,ul li 下图片文字垂直居中
html代码如下: 首页 cqm8@163.com +86 898 234566 对应的css代码如下: .contact ul li { float: left; display: inline; ...
Vertical-align属性应用（图片和文字垂直居中对齐）
Css的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐. 官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效. Vert ...
css 输入框中文字水平居中,css水平居中，文字垂直居中
水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样: 效果: 可以看到这个div已经居中了但是我们里边的表格还没有居中,我们也可以给表格这样来一套,让他相对它的 ...

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

css之line-height及图片文字垂直居中相关推荐

最新文章

热门文章