display:flex垂直居中

display:flex垂直居中布局说明:1.场次为一场比赛     2.比赛双方是交战的两个队伍        3.一场比赛可以有多种玩法,所以场的每个玩法的布局的高度都不确定。主要说下我学到的垂直居中的flex。1.第一次尝试。1divclass=”parent”>2h1>我是通过flex的水平垂直居中噢h1>3h1>我是通过fl

大家好,又见面了,我是你们的朋友全栈君。

 布局说明:1. 场次为一场比赛

      2. 比赛双方是交战的两个队伍

               3. 一场比赛可以有多种玩法,所以场的每个玩法的布局的高度都不确定。

display:flex垂直居中

主要说下我学到的垂直居中的flex。

1. 第一次尝试。

复制代码
1 <div class="parent">
2   <h1>我是通过flex的水平垂直居中噢</h1>
3   <h1>我是通过flex的水平垂直居中噢</h1>
4   <h1>居中</h1>
5   <h1>我是通过flex的水平垂直居中噢</h1>
6 </div>
复制代码
复制代码
html,body{
  
  
  width: 100%;
  height: 200px;
  margin:0;
  padding:0;
}
.parent {
  
  
  display:flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  width:100%;
  height:100%;
  background: #ddd
}
h1{
  
  
  border:1px solid #f00;
  margin:0;
  padding:0;
  width:25%;
}
复制代码

display:flex垂直居中

但是我想要的效果是第三栏的高度和其他栏的高度一样,并且居中。如此css改成了

2. 第二次的更改

复制代码
html,body{
  
  
  width: 100%;
  height: 200px;
  margin:0;
  padding:0;
}
.parent {
  
  
  display:flex;
  width:100%;
  height:100%;
  background: #ddd
}
h1{
  
  
  border:1px solid #f00;
  display:flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  margin:0;
  padding:0;
  width:25%;
}
复制代码

display:flex垂直居中

达到了想要的效果。:)  相当于又嵌套了一层。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130237.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • UAT SIT QAS DEV PET 的缩写都是什么呀?

    UAT SIT QAS DEV PET 的缩写都是什么呀?SIT:SystemIntegrateTest的缩写,即系统整合测试QAS:QualityAssurancesystem 质量保证DEV:Development开发PET:PerformanceEvaluationTest 性能测试

  • PHPmyadmin安装教程+遇到问题「建议收藏」

    PHPmyadmin安装教程+遇到问题「建议收藏」安装PHPMyAdmin遇到些问题,我的PHP版本是5.6的。开始安装了5.0的phpMyAdmin,报错了。,之后将phpMyAdmin减低到4.4.12版本,成功安装。安装过程遇到个问题【注意】localhost/phpmyadmin,这个访问的时候,localhost后面要加:端口号,不然无法访问一、下载PHPmyadmin打开PHP中文网中的PHPmyadmi…

  • noip2018普及组初赛解析_NOIP复赛

    noip2018普及组初赛解析_NOIP复赛博主是一个高中生,在进行noip训练的时候遇到这一题,当时写了2个多小时惭愧啊惭愧,只能感叹一声普及组好可怕!!!然而这题在code.vs里只有黄金。。。我现在很怀疑自己是怎么做出那些大师题的。。。原题链接在此:http://codevs.cn/problem/1133/好了,现在我们来分析一下这个题目。这个题目中读入的字符串是只有‘*’、‘+’、‘(‘和’)‘的,而

  • 根据/proc/partitions获取插入的U盘设备名称

    根据/proc/partitions获取插入的U盘设备名称1 在/proc/partitions中存放着U盘的设备名称,如sda,sdb2等,以sd开头。major主设备号,比如一个U盘有3个分区,主设备名为sda,major为8,分区的major也为8,minor则为分区号,sda1,sda2,minor值为1,2sda的minor为0,name即为设备名,连接/dev./设备名,就可以挂载到一个目录。blocks表示物理设备逻辑块

  • nodejs显现events.js:72抛出错误

    nodejs显现events.js:72抛出错误

  • centos7 vmware(静态IP)

    文章目录1.设置虚拟机网络2.设置宿主机网卡信息3.修改配置文件4.测试这里在NAT模式下进行设置。1.设置虚拟机网络对应于NAT模式,虚拟机应该设置VMnet8,点击编辑-&gt;虚拟网络编辑器,如图:点击更改设置,进入下图界面,选中VMnet8,取消勾选使用本地DHCP服务将IP地址分配给虚拟机点击NAT设置,进入下图界面在子网IP网段中选一个IP作为网关IP并记住(后面有…

发表回复

您的电子邮箱地址不会被公开。

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