zoukankan      html  css  js  c++  java
  • 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后就可以设置宽高了

  • 相关阅读:
    程序命名标准规范(自定义与其他标准无关)
    asp.net(C#)excel导入导出类
    CSS 技巧
    sql server 更改端口之后的登入方式
    日志插件 log4net 的使用
    js动态调用方法
    mongodb
    Spring 之工具类中注入bin
    解释:什么是云计算?
    当 ADO.NET 遇上 dynamic
  • 原文地址:https://www.cnblogs.com/congyue-pepsi/p/5671614.html
Copyright © 2011-2022 走看看