首页 > 其他分享 >flex垂直居中当界面空间不足时显示不全

flex垂直居中当界面空间不足时显示不全

时间:2023-07-06 09:47:27浏览次数:31  
标签:居中 flex 显示 界面 不全 不足

代码示例如下

<div id="a" style="display: flex; justify-content: center; align-items: center;width:200px;height:100%;background:skyblue" >
<div id="b" style="height:400px;background:pink;width:100px"></div>
</div>

 当界面空间不足时,虽然会显示滚动条,但是上半部分内容无法显示

解放方法,给内部元素增加margin:auto

标签:居中,flex,显示,界面,不全,不足
From: https://www.cnblogs.com/QJZY/p/17531221.html

相关文章

  • CSS|Flex布局
    演示动图来源:GitHub一.什么是flex布局是一种专门的CSS一维(水平/垂直)布局方案位置(定性)大小(定量)怎么研究位置和大小借助坐标系(平面直角坐标系)水平轴:主轴垂直轴:交叉轴二.区分flex容器和flex项目1)什么是flex容器启用flex布局方案的元素2)如何......
  • Flex布局常用属性详解
    1.Flex布局与响应式布局1.1为什么需要响应式布局?在电脑PC端,使用浮动,定位同时使用像素px单位就可以完成大部分布局,而且布局完之后不会有大问题,但是到了移动端,移动设备的屏幕尺寸多种多样,从小屏幕的智能手机到大屏幕的平板电脑,甚至是可穿戴设备,简单地运用和PC端一样的方式就会出......
  • 商城小程序-商品界面选择规格颜色等
    原因:因为没有发现好用的组件,所以自己写了样式和判断方法,实际使用在真机演示时略显卡顿,等待后续优化wxml:商品图片、价格、以及选择规格颜色等信息 <view class="popup_information">        <image src="{{data.productList[0].url}}" mode="" />      ......
  • 华为云服务器Ubuntu安装图形界面
    华为云服务器Ubuntu安装图形界面方法一一种最简单测试过的方法GNOME桌面默认使用GDM3作为显示管理器,但从资源角度考虑它有点重。你可以使用更轻量级和资源友好的管理器。这里我们使用一个平台无关的显示管理器lightdm。安装sudoaptinstalllightdm安装ligh......
  • flex布局四个div盒子前三个盒子左对齐,后面的盒子右对齐
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>flex布局</title><style>*{margin:0;padding:0;}.box{ disp......
  • Unity3D高级编程主程手记 学习笔记四:用户界面
     用户界面(UI)是游戏项目中重要的组成部分。面对一个从零开始的项目,首先要选择选用哪个UI系统作为主框架。主流公司里最常用的UI系统有:NGUI,UGUI,除此之外还有部分公司使用FairyGUI,DoozyUI。UGUI的运行原理UGUI是在3D网格下构建起来的UI系统,它的每一个可显示元素都是通过3D......
  • Windows服务启动exe无界面终极解决方案
    摘自:https://www.cnblogs.com/ZoeWong/p/17516579.html1、前言我这个方案(C#操作)是彻底解决【从Windows服务启动程序exe,程序无界面】问题的终极解决方案,终极方案,绝对的终极方案,本来打算收钱的,还是算了,你们也不容易,关注我一下就行。后附代码下载地址。由于安全性问题,Vista以后的......
  • 前端Vue自定义注册界面模版 手机号邮箱账号输入框 验证码输入框  包含手机号邮箱账号
    前端Vue自定义注册界面模版手机号邮箱账号输入框验证码输入框 包含手机号邮箱账号验证,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13306效果图如下:......
  • grid居中总结
    .container{display:grid;place-items:center;/*1.网格项居中*/place-content:center;/*2.网格居中,网格项撑满网格则效果为网格项居中*/}.child{place-self:center;/*3.网格项居中*/margin:auto;/*4.网格项居中......
  • [OSPP开源之夏-2023] 结合NWR实现Flexible Raft
    FeatureName:ImplementingFlexibleRaftwithNWRAuthor:[email protected]:2023-06-28IssueLink:https://github.com/sofastack/sofa-jraft/issues/1003Summary我们希望在原始RAFT算法的基础上,让Leader选举和日志复制除了能需要获得多数派确认模型的支持之......