flex布局实现垂直居中

flex布局实现垂直居中使用flex布局实现居中布局的步骤:父级元素使用flex布局父级元素使用align-items:center;代码示例:<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″/><metahttp-equiv=”X-UA-Compatible”content=”IE=edge”/><metaname=”viewport”

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

使用flex布局实现居中布局的步骤:

  1. 父级元素使用flex布局
  2. 父级元素使用align-items: center;

代码示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style> .a { 
     display: flex; /* 垂直居中 */ align-items: center; background-color: royalblue; height: 100px; } .a .one { 
     background-color: aqua; height: 20px; } .a .two { 
     margin-left: auto; background-color: red; height: 20px; } </style>
  </head>
  <body>
    <div class="a">
      <div class="one">111111111111111111</div>
      <div class="two">222222222222222222</div>
    </div>
  </body>
</html>

效果:
在这里插入图片描述

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

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

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

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

(0)


相关推荐

  • python怎么用反三角函数_反三角函数怎么用

    展开全部已知:cosα32313133353236313431303231363533e4b893e5b19e31333366303132=3/5,求α。解:已知:cosα=3/5有:α=arccos(3/5)经查表(或按计算器),得:α≈53.13010235°,或:α≈323.13010235°考虑到三角函数的周期性,得:α≈360°×k+53.13010235°,或:α≈360°×k+323…

  • python转换函数使用_python进制转换函数代码的使用

    python转换函数使用_python进制转换函数代码的使用python进制转换函数代码的使用发布时间:2020-04-2310:23:22来源:亿速云阅读:188作者:小新以上就是python进制转换函数代码的使用的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来亿速云行业资讯!python如何进行进制转换1、十进制转二进制(bin)首先我们看看怎么把一个十进制转化成二进制,我们可以使用python的内置方法bindec=10pri…

  • Cesium简介「建议收藏」

    Cesium简介「建议收藏」一、Cesium介绍Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的触摸支持,

  • rsync服务的三种模式测试[通俗易懂]

    rsync服务的三种模式测试[通俗易懂]目录1什么是rsync1.1rsync简介rsync特性1.3rsync的企业工作场景说明2rsync三种模式:2.1rsync常用参数选项2.2rsync本地模式2.3rsyncshell模式2.4rsyncdaemon模式3rsync服务故障模拟4rsync多模块实战5rsync排除及无差异同步实战6rsync优缺点6….

    2022年10月13日
  • 史上最简单的 GitHub 教程

    史上最简单的 GitHub 教程1简介  GitHub是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的Web管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。目前,在GitHub上托管的版本数量非常之多,其

  • 华为P50/P50Pro怎么解锁huawei P50pro屏幕锁开机锁激活设备锁了应该如何强制解除鸿蒙系统刷机解锁方法流程步骤不开机跳过锁屏移除锁定进系统方法经验

    华为P50/P50Pro怎么解锁huawei P50pro屏幕锁开机锁激活设备锁了应该如何强制解除鸿蒙系统刷机解锁方法流程步骤不开机跳过锁屏移除锁定进系统方法经验今天带来一台用户华为P50pro手机强制清除华为账号锁案例分享,这个台手机是用户公司手机,由于前使用者离职后未能退出手机的华为账号和锁屏密码,导致手机无法使用。自己通过简单的恢复出厂设置后,发现手机有华为账号锁无法激活手机,这才联系到刷机爱好者技术人员,给予远程强制刷机移除华为P50pro的账号锁。在此提醒广大用户,登录的华为账号建议绑定经常使用的手机号码,防止无法找回密码从而到时手机无法使用。在刷机解锁过程中需要准备以下工具:链接:百度网盘请输入提取码提取码:8888–来自百度网盘超

发表回复

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

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