• CSS——水平/垂直居中


    1.水平居中:

    >文本、图片等行内元素——给父元素设置 text-align: center

    >定宽块状元素——左右margin设置为auto

    >不定宽块状元素:

      加入table标签——利用table标签长度自适应,可以看作定宽元素,然后利用左右margin设置auto实现居中

      设置display: inline——父控件text-align: center,子控件display:inline

      position: relative   &&  left: 50%:

      父元素float,relative,left50%,子元素relative,left-50%

    .container{
        float:left;
    	position:relative;
    	left:50%
    }
    
    .container ul{
    	list-style:none;
    	margin:0;
    	padding:0;
    	
    	position:relative;
    	left:-50%;
    }
    

      

    2.垂直居中:

    >父元素高度确定的单行文本——设置height=line_height,弊端——超出宽度时会脱离块

    >父元素高度确定个多行文本:

      使用table,同时设置vertical-align: middle(td标签默认此属性),对inline-block类型的子元素有用

      display: table-cell

    3.隐式改变display类型:

     当元素设置了:

    position: absolute

    float: left 或 right  

     元素会自动变为 display: inline-block。

    比如设置了absolute后就可以设置宽高了

  • 相关阅读:
    mysql 创建用户名及密码
    mysql 查询user 表结构
    mysql5.7 备份
    mysql 查询用户权限
    mysql 更改某表的字段长度
    centos7 搭建zabbix3.4
    关于存储过程return 和 output 获取
    jquery easyui datagrid getSelections用法
    DateTime ToString
    C#操作DateTable导入到Excel简单方法
  • 原文地址:https://www.cnblogs.com/congyue-pepsi/p/5671614.html
Copyright © 2020-2023  润新知