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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 虚拟机桥接模式下设置静态IP地址无法上网

    虚拟机桥接模式下设置静态IP地址无法上网宿主机:win7虚拟机:Fedora24上网:无线路由器+ADSL虚拟机采用桥接模式,之前虚拟机的网卡配置为DHCP模式,通过无线路由器动态分配一个192.168.1.xxx的IP地址,可以上网。由于最近需要虚拟机的IP地址固定,就设置了一个镜头IP地址:192.168.1.30,结果发现虚拟机无法上网了。折腾了半天发现,在vmware的网络编辑器中,不要使用自动,要明确选择桥接到联网的

    2022年6月5日
    55
  • JB全家桶 激活码_在线激活

    (JB全家桶 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月27日
    66
  • 跳转网站_redirect

    跳转网站_redirectCreatedbyJerryWangonJun07,2014在browser里输入httpurl之后,敲回车之后http自动转换成https:通过httpwatch观察到有一个307redirect:通过tcodeSMICM查看ICMserver设置:发现server设置为所有http的request都会自动redirect成https,portnum…

    2025年6月13日
    3
  • JVM – 内存模型

    JVM – 内存模型JVM-内存模型

    2022年5月24日
    30
  • 实战:WEB攻击之网页脚本攻击试验

    实战:WEB攻击之网页脚本攻击试验

    2021年8月24日
    55
  • Spring Boot 拦截器

    Spring Boot 拦截器上一篇对过滤器的定义做了说明,也比较简单。过滤器属于Servlet范畴的API,与Spring没什么关系。Web开发中,我们除了使用Filter来过滤请web求外,还可以使用Spring提供的HandlerInterceptor(拦截器)。HandlerInterceptor的功能跟过滤器类似,但是提供更精细的的控制能力:在request被响应之前、request被响应之后、视图渲染之前

    2022年4月27日
    41

发表回复

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

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