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


相关推荐

  • BigDecimal转为int类型「建议收藏」

    BigDecimal转为int类型「建议收藏」直接调用BigDecimal的intValue()方法示例:BigDecimala=newBigDecimal(“1.1”);intb=a.intValue();

    2025年6月29日
    1
  • 轻松学习java可重入锁(ReentrantLock)的实现原理

    轻松学习java可重入锁(ReentrantLock)的实现原理前言相信学过java的人都知道synchronized这个关键词,也知道它用于控制多线程对并发资源的安全访问,兴许,你还用过Lock相关的功能,但你可能从来没有想过java中的锁底层的机制是怎么实现的。如果真是这样,而且你有兴趣了解,今天我将带领你轻松的学习下java中非常重要,也非常基础的可重入锁-ReentrantLock的实现机制。

    2022年6月26日
    32
  • 如何解决vscode感叹号无法建立html文件的问题

    如何解决vscode感叹号无法建立html文件的问题今天是我使用vscode的第二天,没想到昨天还能用感叹号(!)建立文件模板的vscode今天却不行了,而且中途也重装过一次。虽然重装后能用感叹号(!)弄一个模板出来,但是在此新建文件的时候就没用了。所以我一直在思索为什么会这样,最终功夫不负有心人还是给我找到了。在此,谢谢那位给我指名方向的大佬。正确方法是输入html:5,然后回车就能出现模板了。因为vscode升级了,所以关于模板的设定可能出现了一些变化吧。在这里恳求大家了,如果各位读者觉得好用的话就动动小手点赞吧。拜托了。…

    2022年8月22日
    10
  • TEXT、TINYTEXT、MEDIUMTEXT、LONGTEXT选择 和 char varchar varchar2 的区别[通俗易懂]

    TEXT、TINYTEXT、MEDIUMTEXT、LONGTEXT选择 和 char varchar varchar2 的区别[通俗易懂]TEXT、TINYTEXT、MEDIUMTEXT、LONGTEXT选择:储存不区分大小写的字符数据TINYTEXT最大长度是255(2^8-1)个字符。TEXT最大长度是65535(2^16-1)个字符。MEDIUMTEXT最大长度是16777215(2^24-1)个字符。LONGTEXT最大长度是4294967295(2^32-1

    2022年8月13日
    5
  • 电脑声音有回音 怎么弄回去啊 5

    电脑声音有回音 怎么弄回去啊 5

    2021年10月10日
    52
  • linux的vi命令详解_centos7 vi命令

    linux的vi命令详解_centos7 vi命令Linux命令-vi命令  vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器.由于对Unix及Linux系统的任何版本,vi编辑器是完全相同的,因此您可以在其他任何介绍vi的地方进一步了解它。Vi也是Linux中最基本的文本编辑器.。1.语法:vi[参数][文件名称]…2.功能:  编辑文件。3.参数:n打印最近的n条历史命令。-N显示历史记录中最近的N个记录。-c清空当前历史命令。-a将目前新增的历史

    2022年9月22日
    3

发表回复

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

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