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


相关推荐

  • 语义分割看这一篇就够了!「建议收藏」

    语义分割看这一篇就够了!「建议收藏」语义分割技术综述本文就ImageSegmentationUsingDeepLearning:ASurvey第三章的模型进行了分析和介绍,第一第二章的基础指示可以看原文进行学习,相关知识有很多这里就不班门弄斧了。最好是一边读原文一边看本文效果更佳原文连接能力有限,水平一般,抱着学习的态度分享此文,有不准确的地方还请各位大佬斧正!3.1全连接网络关于FCN的资料有很多这里就不…

    2022年8月21日
  • 路由器 转接_路由器网络接口

    路由器 转接_路由器网络接口路由器所在的网络位置比较复杂,既可是内部子网边缘,也可位于内、外部网络边缘。同时为了实现强大的适用性,它需要连接各种网络,这样,它的接口也就必须多种多样。对于这些,不要说一般的网络爱好者,就连许多网管人员都无法说清楚。为此笔者向大家全面介绍路由器的各种接口及连接方法。一、路由器接口路由器具有非常强大的网络连接和路由功能,它可以与各种各样的不同网络进行物理连接,这就决定了路由器的接口技术非常复杂,越是高档的路由器其接口种类也就越多,因为它所能连接的网络类型越多。路由器的端口主要分局域网端口、广

    2022年10月19日
  • quota的使用方法

    from:http://man.chinaunix.net/linux/how/Quota.html   序言:这份文件的版权由AlbertM.C.Tam(bertie@scn.org)所保留。同意这份文件的使用、复制,因此非商业性的散布是允许的,但是所有的拷贝以及/或是没有修改直接援用的文件上须有作者与编者的名字及这份注意事项。这份文件是因为希望能有所帮助

    2022年4月8日
  • 对图片批量重命名_重命名批处理最大量

    对图片批量重命名_重命名批处理最大量for遍历指定文件,取其名for%%iin(*.png)do()set/a定义序号(随循环而变)for循环内用到序号值需要使用延迟变量setlocalEnableDelayedExpansion

    2022年9月5日
  • #include<vector>

    #include<vector>

    2021年9月27日
  • 长轮询的使用实现_长轮询和短轮询

    长轮询的使用实现_长轮询和短轮询轮询(Polling):是指不管服务器端有没有更新,客户端(通常是指浏览器)都定时的发送请求进行查询,轮询的结果可能是服务器端有新的更新过来,也可能什么也没有,只是返回个空的信息。不管结果如何,客户端处理完后到下一个定时时间点将继续下一轮的轮询。长轮询(LongPolling):长轮询的服务其客户端是不做轮询的,客户端在发起一次请求后立即挂起,一直到服务器端有更新的时候,服务器才会主动推送信息到…

    2022年10月31日

发表回复

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

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