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


相关推荐

  • 用html设计一个静态网页_学生个人静态网页制作模板

    用html设计一个静态网页_学生个人静态网页制作模板用HTML和CSS制作简单的静态网页(小米商城)网页效果如下:代码如下(第一次写静态网页,中间css代码和html代码没有分离,所以代码可能有点乱还请见谅)1、css代码 /*——————————————–01———————————————————–*/ *{ margin:0; padding:0; } /*清除标

    2025年9月4日
    5
  • 使用mysql中的concat()函数进行字符串拼接_mysql contains

    使用mysql中的concat()函数进行字符串拼接_mysql containsmysql>selectid,avatarfromtf_user;+—-+————–+|id|avatar|+—-+————–+|1|avatar_1.png||2|avatar_6.png||3|avatar_1.png||4|avatar_5.png||5|avatar…

    2022年9月29日
    5
  • egret 音乐播放

    egret 音乐播放播放背景音乐 exportlet curBgMusic egret Sound null exportlet curBgMusicUr string null exportlet curBgMusicCh egret SoundChannel null exportfuncti url

    2025年10月8日
    4
  • cmpp发送短信[通俗易懂]

    cmpp发送短信[通俗易懂]思路:把各种操作解耦,创建各种线程异步进行1.创建一个阻塞队列用来存储任务2.创建一个任务线程,从待发表里取数据(待发表里有专门标明是否被处理过的字段),注入任务队列3.创建n个接收线程,向接收表中塞入数据4.创建n个发送进程,从任务队列里取数据,发送一共有待发表,接收表,已发表,发送错误表,回执状态表5张基础表具体基础代码参考cmpp2.0文档,或者自己搜索…

    2025年7月5日
    4
  • python常用函数总结

    python常用函数总结普通函数一、输入输出函数1、print()函数输出函数向屏幕输出指定的汉字print("helloworld")print()函数可以同时输出多个字符串,用逗号“,”

    2022年7月5日
    24
  • linux 下tar打包举例,Linux tar打包命令

    linux 下tar打包举例,Linux tar打包命令Linuxtar打包命令:范例一:将整个/etc目录下的文件全部打包成为/tmp/etc.tar[root@linux~]#tar-cvf/tmp/etc.tar/etc<==仅打包,不压缩![root@linux~]#tar-zcvf/tmp/etc.tar.gz/etc<==打包后,以gzip压缩[root@linux~]#tar-j…

    2022年5月31日
    47

发表回复

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

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