V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
justdoit123
V2EX  ›  CSS

要什么 vertical-align,拿起 transform: translateY()就是干

  •  
  •   justdoit123 · 2018-08-06 16:03:33 +08:00 · 3718 次点击
    这是一个创建于 2286 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用 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
    xubeiyan
        1
    xubeiyan  
       2018-08-06 16:15:28 +08:00 via Android
    觉得困难就 flex 吧,解决了不少问题
    SakuraKuma
        2
    SakuraKuma  
       2018-08-06 16:20:02 +08:00   ❤️ 1
    sugarsalt
        3
    sugarsalt  
       2018-08-06 16:20:16 +08:00
    flex 或者 grid
    justdoit123
        4
    justdoit123  
    OP
       2018-08-06 16:21:26 +08:00
    @xubeiyan flex 也试过,不过嵌套有点多,没坚持下去,就整体 transform 了。
    dd0754
        5
    dd0754  
       2018-08-06 16:22:20 +08:00
    flex 简单粗暴
    old9
        6
    old9  
       2018-08-06 16:23:40 +08:00 via Android
    去看 spec
    molvqingtai
        7
    molvqingtai  
       2018-08-06 16:24:05 +08:00   ❤️ 1
    vertical-align 这个属性确实蛋疼,各浏览器显示效果还有差异。
    一般开发用 vertical-align: middle; 来取消图片底部的空行
    对齐文字还是老老实实用定位吧
    yamedie
        8
    yamedie  
       2018-08-06 16:24:16 +08:00
    父元素是 display:table, 子元素是 table-cell 的时候, 子元素可以使用 vertical-align:center 来垂直居中
    yamedie
        9
    yamedie  
       2018-08-06 16:24:42 +08:00
    @yamedie 说错了是 vertical-align: middle...
    learnshare
        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 不一定准确,这个偏移量取决于具体显示为什么字体,所以在不同设备、系统和浏览器中可能会有偏差
    justdoit123
        11
    justdoit123  
    OP
       2018-08-06 16:32:45 +08:00
    @SakuraKuma 不错 不错,看着把字体、inline 讲得很详细
    justdoit123
        12
    justdoit123  
    OP
       2018-08-06 16:34:28 +08:00
    @learnshare 是啊,translateY 在不同设备下 就可能 GG 了
    zbinlin
        13
    zbinlin  
       2018-08-06 16:44:15 +08:00
    vertical-align 与字体有关的,用于字体排版,用来做布局的垂直居中对齐本就不是它的工作,只有之前由于没有支持垂直居中对齐的特性出现,被用来 hack 而已。既然现在已经有相关的特性出来了,用不用无所谓啦。
    windfarer
        14
    windfarer  
       2018-08-06 16:45:44 +08:00
    wu67
        15
    wu67  
       2018-08-06 16:59:54 +08:00
    flex 解决大部分问题, 实在不行的垃圾急性, relative 推过去...
    lynan
        16
    lynan  
       2018-08-06 17:58:53 +08:00
    用 flex 之前,经常碰到图片和文字 baseline 不一样高的问题。
    用 flex 之后。写居中就是一把梭。 /doge
    blanu
        17
    blanu  
       2018-08-06 19:23:43 +08:00 via iPhone
    @lynan 是啊,爽的不要不要的

    我现在文字居中用 line-height,其他居中通通 flex
    codermagefox
        18
    codermagefox  
       2018-08-06 21:23:36 +08:00
    我打赌五毛钱,楼主不知道 vertical-align 是支持数值的.
    justdoit123
        19
    justdoit123  
    OP
       2018-08-07 08:47:39 +08:00 via iPhone
    @codermagefox 还真是不知道
    codermagefox
        20
    codermagefox  
       2018-08-07 09:32:10 +08:00
    @mistkafka #19 楼上一大堆都是不知道的...知道的话根本就不难调
    dalieba
        21
    dalieba  
       2018-11-07 21:48:21 +08:00 via Android
    @SakuraKuma #2 看了一下,感觉压根就是照着西方文字的方式来的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2329 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:58 · PVG 23:58 · LAX 07:58 · JFK 10:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.