当前位置: 首页 > 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下执行单元测试
  • 信托公司的“大数据”战略思维
  • 保护数据中心中的流量
  • Angular Elements 及其运作原理
  • download使用浅析
  • egg(89)--egg之redis的发布和订阅
  • Java 网络编程(2):UDP 的使用
  • javascript面向对象之创建对象
  • leetcode讲解--894. All Possible Full Binary Trees
  • Sass 快速入门教程
  • SpiderData 2019年2月16日 DApp数据排行榜
  • webgl (原生)基础入门指南【一】
  • 创建一个Struts2项目maven 方式
  • 动手做个聊天室,前端工程师百无聊赖的人生
  • 计算机常识 - 收藏集 - 掘金
  • 记录一下第一次使用npm
  • 数据可视化之 Sankey 桑基图的实现
  • 为视图添加丝滑的水波纹
  • 与 ConTeXt MkIV 官方文档的接驳
  • ![CDATA[ ]] 是什么东东
  • #我与Java虚拟机的故事#连载11: JVM学习之路
  • (11)MSP430F5529 定时器B
  • (11)工业界推荐系统-小红书推荐场景及内部实践【粗排三塔模型】
  • (3)选择元素——(17)练习(Exercises)
  • (个人笔记质量不佳)SQL 左连接、右连接、内连接的区别
  • (学习日记)2024.01.19
  • .java 9 找不到符号_java找不到符号
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .net6 webapi log4net完整配置使用流程
  • .NET处理HTTP请求
  • [ solr入门 ] - 利用solrJ进行检索
  • [2023-年度总结]凡是过往,皆为序章
  • [4.9福建四校联考]
  • [AI]ChatGPT4 与 ChatGPT3.5 区别有多大
  • [Android]通过PhoneLookup读取所有电话号码
  • [AR Foundation] 人脸检测的流程
  • [BPU部署教程] 教你搞定YOLOV5部署 (版本: 6.2)
  • [Bugku]密码???[writeup]
  • [BZOJ5125]小Q的书架(决策单调性+分治DP+树状数组)
  • [C#]winform部署yolov5-onnx模型
  • [CDOJ 1343] 卿学姐失恋了
  • [datastore@cyberfear.com].Elbie、[thekeyishere@cock.li].Elbie勒索病毒数据怎么处理|数据解密恢复
  • [Design Pattern] 工厂方法模式