有关层的垂直居中

为什么line-height那种方案不能生效,line-height:值针对行内元素,而且是块元素就不行,不管怎么弄

 <div id="title"   class="panel-heading" style="background-color: #2b2b2b; box-sizing:border-box; color: white;height:35px;line-height:35px;padding: 0 10px;">
<span>属性编辑框</span>     
<div  hide="1" id="titletool" style="float:right;height:35px;line-height:35px; cursor:pointer" class="glyphicon glyphicon-resize-full" aria-hidden="true"></div>
</div>

 

 

生成的效果图如下

1、之前的解决方案,小学数学 通过父层的高度和子层的高度的差算出子层的margin-top的值

2、现在的解决方案

在子层中添加下面的css样式

  position: relative;
     top: 50%;
     transform: translateY(-50%);

下面我们看我们实现 的效果

我们代码如下

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有关层的垂直居中</title>
    <style>
 .myclass {
     background-color: brown;
     text-align: center;
     float: left;
     height: 300px;
     line-height: 300px;
     color: white;
     width: 300px;
 }
 .center {
     width: 200px;
     height: 50px;
     padding: 20px;
     text-align: center;
     background: #393;
     color: #fff;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
 }
    </style>
</head>
<body style="position: relative">
 <div class="myclass">
   <div  class="center"></div>
 </div>

</body>
</html>
复制代码

 

有关的源代码下载

 

posted on   漫思  阅读(204)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示