跳至主要內容

常用居中技巧 ?

Weipeng Qiao小于 1 分钟

  1. 行内元素、行内块元素,可以被父元素当做文本处理

即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐。
例如:text-align、line-height、text-indent等。

  1. 如何让子元素,在父亲中水平居中:

    • 若子元素为块元素,给父元素加上:margin:0 auto;。
    • 若子元素为行内元素、行内块元素,给父元素加上:text-align:center。
  2. 如何让子元素,在父亲中垂直居中:

    • 若子元素为块元素,给子元素加上:margin-top,值为:(父元素content- 子元素盒子总高)/2。
    • 若子元素为行内元素、行内块元素
      让父元素的height=line-height,每个子元素都加上:vertical-align:middle;。
      补充:若想绝对垂直居中,父元素font-size设置为0。
上次编辑于:
贡献者: qiaoweipeng