Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[实习笔记] 单行文本和图片的水平中心线对齐方式 #2

Open
sunshinelover opened this issue May 20, 2018 · 0 comments
Open
Labels
Notes 笔记

Comments

@sunshinelover
Copy link

sunshinelover commented May 20, 2018

单行文本和图片的水平中心线对齐方式

场景

div里面有一个img标签,然后按照设计图给把图片的宽度和高度赋给了父元素,给img设置宽度和高度为100%,这样子元素img的宽度和高度就等于父元素的宽度和高度,奇怪的是出现了下图所示的问题:

lark20180520-172916

可以看到图1和图2的详情高度不一样,更加奇怪的是,两个img标签的宽度和高度也是一样的。

lark20180520175108
lark20180520175214

思路

因为不同字体会造成不同的渲染方式,比如下面这样,给这三个span标签的字体都设置了字体大小为100px,但是设置了不同的font-family,而表现出所看见的不一样的字体高度。所以首先给font-size设置为0,消除这个因素的影响。深究起来,其实每个内联元素会有两个高度:

  • line-height

  • 内容区域

每行内容可以由多个内联元素组成(内联标签或者是包含文本的匿名内联元素),每一行都叫做一个 line-box。line-height是实际的高度,这个高度用于计算 line-box 的高度,具体来说就是从子元素的最高点到最低点的高度。

vertical-align 属性也是计算 line-box 高度的重要因素之一,它的默认值是 baseline,也就是与其父元素基线相对齐;baseline 所处的高度跟字体也有关,浏览器认为每个 line-box 的起始位置都有一个宽度为 0 的字符(CSS 文档将其称为 strut),并将其纳入 line-box 的高度的计算中。下图所示为vertical-align的取值效果:

方案

最终img标签的样式:

font-size:0;
vertical-align:top;
    line-height:0;

效果:
lark20180520185048

@leecade leecade changed the title 单行文本和图片的水平中心线对齐方式 chenyulin: 实习笔记 May 20, 2018
@leecade leecade added the Notes 笔记 label May 20, 2018
@leecade leecade changed the title chenyulin: 实习笔记 [实习笔记] chenyulin May 20, 2018
@leecade leecade changed the title [实习笔记] chenyulin [实习笔记] chenyulin 小姐姐 May 20, 2018
@leecade leecade changed the title [实习笔记] chenyulin 小姐姐 [实习笔记] 单行文本和图片的水平中心线对齐方式 Jun 1, 2018
catee pushed a commit that referenced this issue Jun 22, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Notes 笔记
Projects
None yet
Development

No branches or pull requests

2 participants