zoukankan      html  css  js  c++  java
  • 元素水平居中、垂直居中

    元素水平居中:
    1.行内元素:给父元素设为text-align:center;
    块元素:inline-block+父元素text-align:center

    2.块元素:margin-left、margin-right设为auto

    3.浮动元素:
    父元素:position:relative;
        left:50%;
    子元素:position:relative;
        right:50%;

    4.绝对定位元素
      1.已知宽度:
        position:absolute;
        left:50%;
        margin-left:-(宽度/2);
      2.绝对定位元素,不知宽度
        父元素 {
          position:absolute;
          left:50%;
         }
        子元素 {
          position:relative;
          right:50%;
        }
    5.flex
        父元素 {
          display:flex;
          justify-content:center;
        }


    元素垂直居中
    1.文本:line-height:快元素高度

    2.图片:
        父元素 {
          line-height:数值;
        }
        img {
          vertical-align:middle
        }

    3.   父元素 {
        display:table;
        }
       子元素 {
        display:table-cell;
        vertical-align:middle;
      }

    4.已知高度

      子元素 {
        position:absolute;
        top:50%;
        margin-top:-(高度/2);
      }

    5.不知高度

       子元素 {
        position:absolute;
        top:50%;
        transform:translate(-50%,-50%);
       }

    6.flex
      父元素 {
        display:flex;
        align-items:center;
      }

  • 相关阅读:
    Swift3.0P1 语法指南——闭包
    OS X EI Capitan安装refind时出现Could not set boot device property: 0xe00002bc
    Swift3.0P1 语法指南——函数
    Swift3.0P1 语法指南——控制流
    [转]ios push
    给新浪微博审核提供下载地址
    xcode gdb/lldb调试命令
    博弈的真谛到底是什么?
    图基本算法 拓扑排序(基于dfs)
    HDU 1325 Is It A Tree? 判断是否为一棵树
  • 原文地址:https://www.cnblogs.com/hitwgs/p/8514198.html
Copyright © 2011-2022 走看看