zoukankan      html  css  js  c++  java
  • 使用flex和box之中央布局

    flex中间布局

    display:flex配合flex-wrap:wrap更适合做自适应模型
    做中间布局的话注意在里面加一层div

    .flexbox{
    	 500px;
    	height: 500px;
    	background: #ccc;
    	display: flex;
    	align-items: center;
    	margin-top: 10px;
    }
    .flexbox div{
    	text-align: center;
    	flex: 1;
    }
    <div class="flexbox">
    	<div>
    		 <img src="logo.png" alt="jikexueyuan">
    	</div>
    </div>
    

    box中间布局

    仅仅是中央布局的话推荐box方法,注意前面加-webkit-

    .imgbox{
    	 500px;
    	height: 500px;
    	background: #ccc;
    	display: -webkit-box;
    	-webkit-box-pack:center;
    	-webkit-box-align:center;
    }
    <div class="imgbox">
    	<img src="logo.png" alt="jikexueyuan">
    </div>
    
  • 相关阅读:
    科普园地
    专家段 错误 新闻
    16进制转rgb
    图片截取0825
    域名的问题 图片显示不出来
    height cell0809
    添加银行卡
    DeviceDelegateHelper.m
    UUID
    MBProgressHUD 动画
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/12422344.html
Copyright © 2011-2022 走看看