flex垂直居中,水平居中和其他布局方式

flex垂直居中,水平居中和其他布局方式flex水平垂直居中<divclass=”content”><divclass=”item”>1</div><divclass=”item”>2</div><divclass=”item”>3</div></div>.content{display:flex;align-items:center;justify-content:center;bord

大家好,又见面了,我是你们的朋友全栈君。

flex水平垂直居中

<div class="content"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> .content { 
   
   display: flex;
   align-items:center;
   justify-content:center;
   border: 1px solid #0000FF;
   height: 100px;
   width: 500px; // 下面的代码可以让不同宽高的图片在固定宽高的容器里面正常比例显示, 并且水平, 垂直居中 > img { 
   
   		max-width: 100%;
   		max-height: 100%;
   }
 }
 .item { 
   
   width: 60px;
   height: 40px;
   border: 1px solid red;
 }

参考文章: https://zhuanlan.zhihu.com/p/84289727

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/132066.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 基于MeanShift的目标跟踪算法及实现

    基于MeanShift的目标跟踪算法及实现这次将介绍基于MeanShift的目标跟踪算法,首先谈谈简介,然后给出算法实现流程,最后实现了一个单目标跟踪的MeanShift算法【matlab/c两个版本】 一、简介    首先扯扯无参密度估计理论,无参密度估计也叫做非参数估计,属于数理统计的一个分支,和参数密度估计共同构成了概率密度估计方法。参数密度估计方法要求特征空间服从一个已知的概率密度函数,在实际的应用中这个条件很难达到

    2022年7月26日
    3
  • Spring整合Sharding-JDBC分库分表详情

    Spring整合Sharding-JDBC分库分表详情Spring整合Sharding-JDBC分库分表详情一、概述最初线上系统的业务量不是很大,业务数据量并不大,比如说单库的数据量在百万级别以下(事实上千万级别以下都还能支撑),那么MySQL的单库即可完成任何增/删/改/查的业务操作。随着业务的发展,单个DB中保存的数据量(用户、订单、计费明细和权限规则等数据)呈现指数级增长,那么各种业务处理操作都会面临单DB的IO读写瓶颈带来的性能问题。S…

    2022年6月14日
    25
  • 43、java.beans.PropertyDescriptor类

    43、java.beans.PropertyDescriptor类一、软件包java.beans    包含与开发beans有关的类,即基于JavaBeansTM架构的组件 二、PropertyDescriptor   PropertyDescriptor描述JavaBean通过一对存储器方法导出的一个属性 publicclassPropertyDescriptorextendsFeature…

    2022年9月27日
    0
  • pycharm多行代码同时注释、去除注释_解除注释的快捷键

    pycharm多行代码同时注释、去除注释_解除注释的快捷键1.单行多行注释快捷键:ctrl+/2.取消单行多行注释快捷键:ctrl+/

    2022年8月29日
    0
  • Navicat连接Mysql8.0.11出现1251错误

    Navicat连接Mysql8.0.11出现1251错误重装了电脑,安装了最新版的MySQL数据库,结果Navicat连接Mysql报1251错误,sqlyog报2058错误,但是window命令进入mysql,账号密码都是正确的。在网上查的是,出现这个原因是mysql8之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password,解决问题方法有两种…

    2022年10月15日
    0
  • python爬虫,selenium+chromedriver,谷歌驱动自动下载及配置

    python爬虫,selenium+chromedriver,谷歌驱动自动下载及配置我们在使用selenium时,有一件让我们狠抓狂的事,那就是驱动的下载与配置…为什么这么说呢?

    2022年10月23日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号