zoukankan      html  css  js  c++  java
  • CSS进阶(七)vertical-align

    由于是相对字母 x 的下边缘对齐,而中文和部分英文字形的下边缘要低于字母 x 的下边缘,因 此,会给人感觉文字是明显偏下的,一般都会进行调整。

    vertical-align属性值

    (1)线类 middle ,top,bottom

    (2)上下标 sub super

    (3)文本类 text-top text-bottom

    (4)数值类 10px 1em 20% -10px

    vertical-align作用的前提

    只能作用于内联元素以及display值为table-cell的元素

    浮动和绝对定位会让元素块状话,因此不会支持Vertical-align

    vertical-align的百分比值是相对于line-height计算的

    text-align:justify 两端对齐需要的内容超过一行

    一个 inline-block 元素,如果里面没有内联元素,或者 overflow 不是 visible, 则该元素的基线就是其 margin 底边缘;否则其基线就是元素里面最后一行内联元素的基线

    图标后跟文字https://demo.cssworld.cn/5/3-7.php

    vertical-align:middle

    内联元素:元素的垂直中心点和行框盒子基线往上 1/2 x-height 处对齐。 

    table-cell 元素:单元格填充盒子相对于外面的表格行居中对齐。

     vertical-align的上标和下标属性和html里的<sup>和<sub>的区别在于html元素会将内容设置为smaller

  • 相关阅读:
    Java线程面试题 Top 50
    深入理解java内存模型
    线程池的理解
    Thread的理解
    ThreadLocal的理解
    排序算法(简)
    排序算法
    【Java集合源码剖析】LinkedHashmap源码剖析
    vsftp上传文件权限问题
    xp 通过注册表修改环境变量
  • 原文地址:https://www.cnblogs.com/goOtter/p/9788832.html
Copyright © 2011-2022 走看看