当前位置: 首页 > news >正文

高度不固定时垂直居中

clipboard.png

语言表达能力有限,直接上图。我想做的效果就是左侧是导航标题,右侧是对应的内容条目。
但是右侧内容条目数目不固定,因此对应的高度也不固定。这效果看似简单,但本人半天没想出来,苦读一天文档,终于找到解决方案(angularjs写的)。

<style>
.itemGroup {
    position: relative;
}

.itemGroupTitle {
    text-align: center;
    color: white;
    font-weight: bold;
    position: static;
}

.itemGroupTitle1 {
    position: absolute;
    width: inherit;
    height: 100%;   
}

.itemGroupTitle2 {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 140px;
    height: 20px;
}
</style>
<div class="row itemGroup" ng-repeat="item in keyTypes.dataSource">
    <div class="col-sm-2 itemGroupTitle">
        <div class="itemGroupTitle1"><div class="itemGroupTitle2">{{item.GroupName}}></div></div>
    </div>
    <div class="col-sm-10 itemGroupContent">
        <div class="row">
            <div class="col-sm-6 item" ng-repeat="keytype in item.keyTypes">{{keytype.KeyTypeName}}</div>
        </div>
    </div>
</div>

相关文章:

  • HTML内联元素
  • Java四中控制访问符
  • py xrange
  • JSPWiki安装配置及FCKEditor的集成
  • 1163 访问艺术馆
  • 计划任务 at   batch   cron anacron
  • 区块链技术与应用回顾
  • WiFi万能钥匙张发有:WiFi的安全性是第一位的
  • 英国电信推出FTTP和G.fast新试点项目
  • 大数据时代,路透社如何玩转“原生数据”做新闻?
  • 中国科技公司正在赶超硅谷吗?
  • Veritas面向OpenStack推SDS解决方案
  • Android Studio下执行单元测试
  • 信托公司的“大数据”战略思维
  • 保护数据中心中的流量
  • 08.Android之View事件问题
  • 2019.2.20 c++ 知识梳理
  • Android框架之Volley
  • Electron入门介绍
  • HTML中设置input等文本框为不可操作
  • Intervention/image 图片处理扩展包的安装和使用
  • jquery ajax学习笔记
  • JS 面试题总结
  • Laravel 中的一个后期静态绑定
  • Making An Indicator With Pure CSS
  • MySQL Access denied for user 'root'@'localhost' 解决方法
  • PHP 7 修改了什么呢 -- 2
  • Spring Cloud Feign的两种使用姿势
  • 包装类对象
  • 读懂package.json -- 依赖管理
  • - 概述 - 《设计模式(极简c++版)》
  • 悄悄地说一个bug
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • MyCAT水平分库
  • 如何正确理解,内页权重高于首页?
  • #include到底该写在哪
  • (26)4.7 字符函数和字符串函数
  • (C语言)二分查找 超详细
  • (搬运以学习)flask 上下文的实现
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (附程序)AD采集中的10种经典软件滤波程序优缺点分析
  • (使用vite搭建vue3项目(vite + vue3 + vue router + pinia + element plus))
  • (四)Linux Shell编程——输入输出重定向
  • (一)Neo4j下载安装以及初次使用
  • (转)甲方乙方——赵民谈找工作
  • (转)项目管理杂谈-我所期望的新人
  • ***原理与防范
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .dat文件写入byte类型数组_用Python从Abaqus导出txt、dat数据
  • .NET 8.0 发布到 IIS
  • .net core开源商城系统源码,支持可视化布局小程序
  • .NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。
  • @Transaction注解失效的几种场景(附有示例代码)
  • @拔赤:Web前端开发十日谈
  • [ vulhub漏洞复现篇 ] JBOSS AS 5.x/6.x反序列化远程代码执行漏洞CVE-2017-12149