不一样的思念0511 2016-08-19 02:00 采纳率: 0%
浏览 1746
已结题

关于CSS中内联元素对齐问题(line-height && vertical align)

 <div style="background-color: orange; display: inline-block">
        <div style="display: inline-block; font-size: 40px; background-color: blue;">xxXXAABB</div>
        <div style="display: inline-block; font-size: 80px; background-color: red;">xxXXAABB</div>
        <div style="display: inline-block; font-size: 80px; background-color: green; vertical-align: middle;">xxXXAABB</div>
    </div>

图片说明

请问上面代码显示效果中为什么第三个子div会比前两个低一点?

  • 写回答

7条回答 默认 最新

  • 童无心 2016-08-19 02:28
    关注
    xxXXAABB
        <div style="display: inline-block; font-size: 80px; background-color: red;">xxXXAABB</div>
        <div style="display: inline-block; font-size: 100px; background-color: green; vertical-align: middle;">xxXXAABB</div>
        <div style="display: inline-block;  background-color: blue;">xxXXAABB</div>
    </div>
    

    在w3c上 vertical-align的定义是这样的 :该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
    首先行内元素的基线 :经过测试,行内元素的基线就是 不设定字体大小的时候 字母下方的线
    元素的基线 就是字母下方的线 第四个子div就是 参考,无论第三个div字体大小怎么改变 ,基线 一致在中间位置

    图片说明
    图片说明

    评论

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能