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)
blank

相关推荐

  • 安卓CTS测试(测试手机性能的软件)

    CTS和GTS测试基本操作步骤    CTS全称CompatibilityTestSuite(兼容性测试),CTS的目的就是让各种Android设备(如手机)开发商能够开发出兼容性更好的Android设备,Google制定了CDD(CompatibilityDefinationDocument)规范,为了达到验证CDD规范的目的,提供了一组CASE给不同平台厂商进行验证,Andr…

  • 怎么检查iis是否安装成功_注册表信息

    怎么检查iis是否安装成功_注册表信息利用注册表检测IIS是否安装

  • 配置 PyCharm for Linux 设置启动图标 pycharm-edu-2021.3.1 Ubuntu 18.04.6 LTS

    配置 PyCharm for Linux 设置启动图标 pycharm-edu-2021.3.1 Ubuntu 18.04.6 LTS安装PyCharm下载PyCharm教育版,使用tar-zxvf命令将其解压到你希望的软件安装位置,解压完就是安装完了,要选择一个你有全部权限的目录,一般在自己家目录下挑选位置即可。cd到安装目录下,执行以下命令运行PyCharm,第一次运行会有一些选择内容,按实际选择即可。cdbin/./pycharm.sh安装完成!自定义图标固定到收藏夹在下面两个路径中任选,创建matlab.desktop文件。前者是系统全局的,后者是当前用户私有的/usr/share/appl

    2022年10月22日
  • VS 2013 所有产品密钥

    VS 2013 所有产品密钥转载自:https://blog.csdn.net/my1989night/article/details/44916079VS2013产品密钥–所有版本VisualStudioUltimate2013KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9VisualStudioPremium2013KEY(密钥):FBJVC-3CMTX-D8DVP…

  • WiFi的2.4G、5G、6G频段「建议收藏」

    WiFi的2.4G、5G、6G频段「建议收藏」目前WiFi已经推出了6G频段,Android源码中也增加了相关的功能,这里总结一下。2.4G一共分为14个信道(1-14),从2412到2484,每个信道的有效宽度是20MHz,另外还有2MHz的强制隔离频带(类似于公路上的隔离带)。即,对于中心频率为2412MHz的1信道,其频率范围为2401~2423MHz。5G一共有60个信道(32-173),从5160到5865,在中国支持的5G信道为363840444648525456606264,后六个是DFS。6G为1-2

    2022年10月20日
  • webpack css_webpack打包css文件路径

    webpack css_webpack打包css文件路径css文件处理-准备工作(以下项目配置都是基于上一篇webpack(4)的基础上)在项目开发中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。这里我们就在src目录中创建一个n

发表回复

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

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