CSS 行内对齐的黑魔法

enda 发布于2019-08-29 11:25 / 2216人阅读

摘要：魔法完整代码如下今日瞎选篇以上代码运行效果和之前一摸一样这里就不一一截图费大家流量啦良心前端。。。。对这个属性不熟悉的朋友可以去看的文档几种语法如下我们用的这个长度单位实际应用较少，却是行内元素垂直对齐的黑魔法。

本文和以前的文章类似，orange 尽量带给大家分享实际项目中的坑怎么填，当然只是提供思想，方法很多欢迎讨论，还有就是对于刚上手前端的新人不是特别友好，没关系，涉及到基础知识我会对应的进行指引，给出链接或给出提示，大家可以自行 Google(百度)。

说到行内对齐大家可能会想到类似水平对齐，垂直对齐总结类型的文章，既然我们叫 黑魔法 就不会是基础的对齐教程，基础教程的文章好多，大家想必都知道多种方法实现对齐

项目背景

还是 orange 所在公司的移动端项目，上案例

截多了，咱们只看第一行的文字，算是每一天都有的 title，有人说: TMD 你在逗我？这有什么可讲的谁都会写好不好！

先别激动，我当然不是解释这个布局怎么实现的，简单的例子更容易解释问题，继续往下看初步实现的代码，


  14 OCT
  x
  今日瞎选6篇

截图如下

细心的朋友看出问题了，看不出也没关系，我们加两条辅助线嘛！


  14 OCT
  x
  今日瞎选6篇

效果如下

好，相信大家现在一目了然存在的问题了，那就是前面的 date 并没有垂直居中，原因呢！解释起来也简单

这里只需要修改一行代码就能回答大家的疑问

14 OCT orange

将上文对应 html 修改后，得到截图

这个让我不禁想起了小学英语作业本的四线格，哈哈，大写字母的确都在上方的两个格，而小写上中下都有例子，多带带看 g，很好解释上面的显现了吧。

看似简单的案例还就是这么特殊，恰巧都是数字和大写字母，细心的还会发现后面的 6 也有问题，一不留神，不居中了，设计来找你，你一脸蒙逼的说我是按照居中写的啊，解决不了了？

不是的，我们接下来就是解决这个问题的，现实项目要更复杂一些，有经验的前端知道字体间的差异，个别的字体上下相差特别悬殊，

这里前后的字体是不同的，但幸好垂直方向的差异不是很大，这里我引入了项目原有的字体，中间的 x 其实是个 svg 这里不赘述。因为看懂思想再来一百个不对齐的你也能迎刃而解。

进入真正的魔法世界，针对此案例给出两个思路大家自行选择

inline-block 魔法

不一步一步解释，直接上已经解决问题的代码


  14 OCT
  x
  今日瞎选6篇

效果如下

好棒啊，我只改变了后面文字的 font-size: 16px; 解决问题了耶，高兴的拿给设计师，对比之后返工了，

what fuck？什么鬼？心中一万个草泥马（神兽）奔腾而过，仔细看！瞪大眼睛。。。。没错

今字的上头出了我们的辅助线，设计师也会将手机截屏然后对照原稿做辅助线对比的哦～

解决办法相当简单，只需要

.desc {
  margin-top: 1px;  /* add */

  font-size: 16px;
  font-family: FZYouH_512B;
}

只需要加一行，当当当当～

嗑嗑，凑合这样吧，为什么？明明对齐了啊！再仔细看，我是认真的，没玩大家，发现我们的 date 低了不到一个像素（使用 Retina 屏幕的朋友看的明显些），有人问一像素以内可以调整嘛？明确告诉大家可以，之后的文章准备做解释，这里不展开

第一种方案到这为止，上手试验的朋友虽然没有我的字体，你不必去下载，浏览器默认字体一样的，我们讲的是原理，没必要还原我的 demo，关键就是 block 元素的上下 margin 调整。

提醒：这里的 margin 可以设置负值，如果负值无用自己去探索原因吧，给大家线上项目的控制台

我这里给的就是负值，是有作用的哦，可以去敢玩移动端主页，记得在模拟器里查看（不然会乱成一锅粥），控制台一看便知，不过多解释啦。

vertical-align 魔法

完整代码如下


  14 OCT
  x
  今日瞎选6篇

以上代码运行效果和之前一摸一样这里就不一一截图费大家流量啦（良心前端。。。。）

和上一个方法区别在于我们行内元素还用之前的 span 标签。然后通过 vertical-align: 1px; 来调节垂直方向上下的位置。对这个属性不熟悉的朋友可以去看MDN的文档：https://developer.mozilla.org...

几种语法如下

/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/*  values */
vertical-align: 10em;
vertical-align: 4px;

/*  values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

我们用的这个 values 长度单位实际应用较少，却是行内元素垂直对齐的黑魔法。不了解的不要紧，赶快 get 新技能

总结

两种方案都可行，有时候不要因为一像素绞尽脑汁，找到突破口，以后谁还会怕行内对齐了呢？

你们还有更好的想法吗？欢迎交流

文章出自 orange 的 个人博客 http://orangexc.xyz/

云服务器 GPU云服务器人工智能的黑科技魔法女巫黑魔法魔法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111643.html

来自前端菜鸟对css display属性的理解

摘要：对于一个刚起步的新手来说，搞定属性确实没有那么容易。现在我来说说我对几个属性值得理解。此属性是说不让元素显示。先上图是对于行内元素来说的，例如等。对于一个刚起步的新手来说，搞定css属性确实没有那么容易。现在我来说说我对display几个属性值得理解。（只是几个经常用到的属性值），不足的地方还请大佬们指正。 1.display:none display：none; 此属性是说不让元素...

TZLLOG 2019-08-29 13:00 评论0 收藏0
来自前端菜鸟对css display属性的理解

摘要：对于一个刚起步的新手来说，搞定属性确实没有那么容易。现在我来说说我对几个属性值得理解。此属性是说不让元素显示。先上图是对于行内元素来说的，例如等。对于一个刚起步的新手来说，搞定css属性确实没有那么容易。现在我来说说我对display几个属性值得理解。（只是几个经常用到的属性值），不足的地方还请大佬们指正。 1.display:none display：none; 此属性是说不让元素...

SHERlocked93 2019-08-01 17:14 评论0 收藏0
从hello world看JavaScript隐藏的黑魔法

摘要：如果类型转换你还不是很了解，可以先读下这篇来理解一下从看隐式强制转换机制。函数可对通过编码的字符串进行解码。而作者封装的也是基于这两者来实现输出黑魔法字符串的。同时通过，返回了一个匿名函数形成了闭包。为了达到装逼的效果。写在最前事情的起因是这段看起来不像代码的代码： showImg(https://segmentfault.com/img/remote/14600000126810...

cnio 2019-08-21 18:35 评论0 收藏0
CSS魔法堂：深入理解line-height和vertical-align

摘要：下的属性值详解以下内容均在中测试默认对齐方式这里作为参考系，而它的就是所要对齐的了。没有任何变化。那改变又如何呢为了让的清晰可见，特意添加一个的包裹着。前言一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟...

avwu 2019-08-30 12:52 评论0 收藏0
CSS字体和文本相关

摘要：本博文主要分为两部分，第一部分介绍字体属性，第二部分则介绍了文本常用属性二字体属性字体系列首先介绍一下什么是字体系列所谓字体系列我理解的就同一字体下的不同风格的具体字体的集合。这里的楷体，就可以看做是一个单独的字体系列。一前言目前在做IFE的练习，初步学习到CSS内容，所以做了总结。本博文主要分为两部分，第一部分介绍CSS字体属性，第二部分则介绍了文本常用属性二字体属性 2....

xiaokai 2019-08-30 15:54 评论0 收藏0