Can I use?
› http://caniuse.com/
Less
› http://lesscss.org
Cool Libraries
› Bootstrap from Twitter
› Jetstrap
要什么 vertical-align，拿起 transform: translateY()就是干
justdoit123 · 2018-08-06 16:03:33 +08:00 · 3719 次点击这是一个创建于 2290 天前的主题，其中的信息可能已经有所发展或是发生改变。
用 vertical-align 调了 1 小时的 inline 垂直居中对齐，真 TM 是折磨。问题 1： 我很好奇各位 v 友是如何理解 vertical-align 这个 css 属性的？
每个属性值好像都知道是干什么的，但它们用起来完全摸不着头脑，按了葫芦起了瓢。
折腾一翻之后，我觉得理解 vertical-align 的原理是不可能的，这辈子都不可能去理解 vertical-align 的原理。
最后我选择用 transform: translateY(2x)，把中间凸起的那个 inline 元素强行摁了下去。感觉整个世界都清静了！
问题 2：你们如何处理行内元素垂直居中的问题？
21 条回复 • 2018-11-07 21:48:21 +08:00
 |
1
xubeiyan 2018-08-06 16:15:28 +08:00 via Android
觉得困难就 flex 吧，解决了不少问题
|
 |
2
SakuraKuma 2018-08-06 16:20:02 +08:00  1
|
 |
3
sugarsalt 2018-08-06 16:20:16 +08:00
flex 或者 grid
|
 |
4
justdoit123 OP @xubeiyan flex 也试过，不过嵌套有点多，没坚持下去，就整体 transform 了。
|
 |
5
dd0754 2018-08-06 16:22:20 +08:00
flex 简单粗暴
|
 |
6
old9 2018-08-06 16:23:40 +08:00 via Android
去看 spec
|
 |
7
molvqingtai 2018-08-06 16:24:05 +08:00 1
vertical-align 这个属性确实蛋疼，各浏览器显示效果还有差异。
一般开发用 vertical-align: middle; 来取消图片底部的空行 对齐文字还是老老实实用定位吧 |
 |
8
yamedie 2018-08-06 16:24:16 +08:00
父元素是 display:table, 子元素是 table-cell 的时候, 子元素可以使用 vertical-align:center 来垂直居中
|
 |
10
learnshare 2018-08-06 16:31:51 +08:00 1
vertical-align 取决于字体的某些特征，属于字体和排版相关的知识，参考着两个链接应该能有个大概的认识
https://zh.wikipedia.org/wiki/%E5%9F%BA%E7%B7%9A#/media/File:Typography_Line_Terms.svg https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align 简单 translateY 不一定准确，这个偏移量取决于具体显示为什么字体，所以在不同设备、系统和浏览器中可能会有偏差 |
|
11
justdoit123 OP @SakuraKuma 不错 不错，看着把字体、inline 讲得很详细
|
|
12
justdoit123 OP @learnshare 是啊，translateY 在不同设备下 就可能 GG 了
|
 |
13
zbinlin 2018-08-06 16:44:15 +08:00
vertical-align 与字体有关的，用于字体排版，用来做布局的垂直居中对齐本就不是它的工作，只有之前由于没有支持垂直居中对齐的特性出现，被用来 hack 而已。既然现在已经有相关的特性出来了，用不用无所谓啦。
|
 |
14
windfarer 2018-08-06 16:45:44 +08:00
|
 |
15
wu67 2018-08-06 16:59:54 +08:00
flex 解决大部分问题, 实在不行的垃圾急性, relative 推过去...
|
 |
16
lynan 2018-08-06 17:58:53 +08:00
用 flex 之前，经常碰到图片和文字 baseline 不一样高的问题。
用 flex 之后。写居中就是一把梭。 /doge |
 |
18
codermagefox 2018-08-06 21:23:36 +08:00
我打赌五毛钱,楼主不知道 vertical-align 是支持数值的.
|
|
19
justdoit123 OP @codermagefox 还真是不知道
|
|
20
codermagefox 2018-08-07 09:32:10 +08:00
@mistkafka #19 楼上一大堆都是不知道的...知道的话根本就不难调
|
 |
21
dalieba 2018-11-07 21:48:21 +08:00 via Android
@SakuraKuma #2 看了一下，感觉压根就是照着西方文字的方式来的。
|
Select Language