zoukankan      html  css  js  c++  java
  • 【CSS】水平居中与垂直居中

    有宽度的div水平居中

    1.左右margin设为auto即可
    .center {
    960px;
    margin-left: auto;
    margin-right: auto;
    }

    2.绝对定位
    .ele {
    position: absolute;
    宽度值;
    left: 50%;
    margin-left: -(宽度值/2);
    }

    没有定义宽度的div水平居中

    1.父容器text-align:center 子容器为display:inline-block
    .container{
    500px;
    margin: 0 auto;
    text-align:center;
    background:red;
    }
    .center{
    display:inline-block;
    }

    有高度的div垂直居中

    1.绝对定位 margin:auto

    .content {
        position:absolute; 
        top:0; 
        bottom:0; 
        left:0; 
        right:0; 
        margin:auto; 
        height:240px; 
        70%; 
    }
    

    2.绝对定位 同水平居中

    .ele {
    	position: absolute;
    	 高度值;
    	left: 50%;
    	margin-left: -(高度值/2);
    }	
    

    3.文字的垂直居中的很简单了 就是line-height就可以了

    4.行内元素如img的垂直居中

        <p class="sditem1">适配所有主流机型的APP<img src="images/电工.png"></img></p>
        .sdTxtWrap img{
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
         50px;
        height: 50px;
        border-radius: 25px;
        }
    

    这样图片的基准线就会对齐文本的中线,一定要记住vertical-align只能用于行内元素与table-cell!!

    没定义高度的div垂直居中

    1.使用表格的 vertical-align property 属性。

        <div class="wrapper">  
        <div class="cell">
            <div class="content"> Content goes here</div>
        </div>
    </div>  
    
    .wrapper {display:table;} 
    .cell {
    	display:table-cell; 
    	vertical-align:middle;
    }
  • 相关阅读:
    React源码解析-从头写一个React的难点与思路
    2017前端书籍推荐——如何一步步看懂框架源码
    React-ReactElement解析
    新手初学WPF本地化
    IOS 关闭键盘的几种方式
    专注技术
    test
    盒子模型
    CSS选择器详解(二)通用选择器和高级选择器
    CSS选择器详解(一)常用选择器
  • 原文地址:https://www.cnblogs.com/lijie33402/p/4596006.html
Copyright © 2011-2022 走看看