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)
上一篇 2022年6月11日 下午12:46
下一篇 2022年6月11日 下午12:46


相关推荐

  • 计算机病毒级防范措施总结,计算机病毒及防范措施

    计算机病毒级防范措施总结,计算机病毒及防范措施计算机病毒及防范措施计算机病毒及防范措施摘要随着全球计算机用户的激增,随着带来的计算机病毒的危害力度也逐渐显现,迫切需要在防范计算机病毒方面加强研究。基于此,本文在全面总结了计算机病毒的内涵、分类以及计算机感染病毒的诸多现象的基础上,深入探讨了防范计算机病毒的具体可行性措施,以期为广大计算用用户安全使用计算机提供一些理论指导和参考。关键词:计算机;病毒;类型;防范;措施1计算机病毒的概念、分…

    2022年5月30日
    43
  • 服务器加网站防盗链,网站防盗链的设置方法介绍(适用于IIS和Apache)[通俗易懂]

    服务器加网站防盗链,网站防盗链的设置方法介绍(适用于IIS和Apache)[通俗易懂]这篇文章主要为大家详细介绍了网站防盗链的设置方法介绍(适用于IIS和Apache),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。做网站的朋友一般都会遇到这样的一种情况,就是别人的网站经常会调用我们自己网站的图片或者文件,这无形之中会增加我们的服务器的压力,尤其是对于一些服务器带宽并不是十分富裕的网站来说就更是雪上加霜。因此我们需要学会设置防盗链来应对或者说来…

    2022年7月23日
    27
  • 阿里云通义千问最新版怎么免费接入API?个人和企业低成本调用教程

    阿里云通义千问最新版怎么免费接入API?个人和企业低成本调用教程

    2026年3月12日
    3
  • 网络模型可视化工具netron

    网络模型可视化工具netron在实际的项目中 经过会遇到各种网络模型 需要我们快速去了解网络结构 如果单纯的去看模型文件 脑海中很难直观的浮现网络的架构 这时 就可以使用 netron 可视化工具 可以清晰的看到每一层的输入输出 网络总体的架构 而且支持各种不同网络框架 简单好用 参考资料 网络可视化工具 netron 详细安装流程

    2026年3月26日
    2
  • 手机怎样复制一段文字_微信文章如何整篇复制出来

    手机怎样复制一段文字_微信文章如何整篇复制出来1、网页复制大家应该都遇到过这种情况吧像这种情况怎么办呢,很简单,方法也很多,最简单的就是就地取材。方法一:用翻译获取,我们用鼠标选择一部分后会自动出现翻译,没有出现翻译需要等一到两秒(如果实在没有可以往下看看别的复制方法),我们点击翻译然后会出现一个百度翻译,我们点击百度翻译它会自动跳转到百度翻译页面,我们可以直接复制就行了方法二:用网页控制台,我们F12打开控制台,F12打不开控制台的可以试试Fn+F12,或者右键检查,打开控制台后…

    2022年10月20日
    6
  • manus网页版入口在哪-manus网页版入口怎么找

    manus网页版入口在哪-manus网页版入口怎么找

    2026年3月15日
    3

发表回复

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

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