Javascript垂直居中div(可变高度)

2023-12-22

我正在尝试使用 Javascript 将 div 垂直居中。因为文本会发生变化,所以我不能使用固定的高度。

我想做这个without Jquery.

#box2 {

    width: 100%;
    height: 100%;
    position:relative;
    background-color: orange;

}
            #informationBox {

            padding: 0.5em;
            background-color: #fff;
            border-radius: 12pt;
            border: solid black 3pt;
            max-width: 683px;
            margin: 0 auto;
            text-align: center;
        }

JavaScript:

var container = document.getElementById("#box2");
var inner = document.getElementById("#informationBox");
var inHeight = inner.offsetHeight;

container.style.height=(window.innerHeight);
container.style.width=window.innerWidth;

var conHeight=container.offsetHeight;

inner.style.marginTop=((conHeight-inHeight)/2);

任何帮助都会很棒:)

http://jsfiddle.net/tmyie/EttZQ/ http://jsfiddle.net/tmyie/EttZQ/


你几乎已经拥有了,你只需要改变一些事情。第一的,getElementById仅需要一个 id 字符串,而不是一个选择器。其次,您需要将“px”添加到样式声明中。

var container = document.getElementById("box2");
var inner = document.getElementById("informationBox");
var inHeight = inner.offsetHeight;
container.style.height = window.innerHeight;
container.style.width = window.innerWidth;
var conHeight = container.offsetHeight;

inner.style.marginTop = ((conHeight-inHeight)/2)+'px';

这是更新的小提琴:http://jsfiddle.net/EttZQ/1/ http://jsfiddle.net/EttZQ/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript垂直居中div(可变高度) 的相关文章

随机推荐

  • VueJs + Vuex + 地图动作

    在文档中 除了通过操作调用的突变之外 状态是不可变的 好吧 我在我的组件中使用 mapGetters mapActions store export default namespaced true state color violet mu
  • MSBuild 构建顺序

    看着这个article http msdn microsoft com en us library ms181718 28VS 80 29 aspx来自 MS 我有一个关于 SolutionToBuild 部分的问题
  • JSONDecodeError:期望值:缩放 SEC EDGAR 时第 1 行第 1 列(字符 0)

    我的代码如下 import requests import urllib from bs4 import BeautifulSoup year url r https www sec gov Archives edgar daily ind
  • 如何强制 MongoDB pullAll 忽略文档顺序

    我有一个 mongoDB 文档 其结构如下 user user name streams user user a name name a user user b name name b user user c name name c 我想使
  • 仅显示一次启动画面

    我有一个无线电 aac 播放器 我在开始时添加了一个启动屏幕 但我只想显示一次 因为如果用户按后退按钮 我的应用程序将停留在后台并播放音乐服务 但是当我返回到应用程序再次显示启动屏幕 这是我实际的闪屏代码 public class Inic
  • 一个文件夹中存储的文件过多是否会导致对其中一个文件的 HTTP 请求变慢?

    我的网站有近一百万张图像 它们存储在我的 Windows 服务器上的一个文件夹中 由于直接在桌面上打开这个文件夹让我和我的 CPU 疯狂 我想知道使用我的 PHP 脚本进行 HTTP 请求获取其中一个是否也很费力 那么 将它们分成不同的文件
  • 在协议缓冲区中使用小数和日期时间的最佳方法是什么?

    我想找出存储未包含在协议缓冲区支持的列表中的某些常见数据类型的最佳方式是什么 日期时间 秒精度 日期时间 毫秒精度 固定精度的小数 精度可变的小数 很多 bool 值 如果你有很多这样的值 那么由于它们的标签 看起来每个值都会有 1 2 个
  • 如何从 JavaScript 中的范围中获取随机字符?

    查看片假名字符 http en wikipedia org wiki 片假名 Unicode http en wikipedia org wiki Katakana Unicode 如何从 Unicode 范围中获取随机字符 我很接近 St
  • 为什么导航属性必须是公共的才能创建代理?

    At http msdn microsoft com en us library dd468057 aspx http msdn microsoft com en us library dd468057 aspx我读到我想要更改跟踪代理的所
  • android 按钮可以指定边框吗?

    是否可以在 main xml 中指定 Android 按钮的边框 注 没有 包含笔划标记的单独 xml 文件 但在我定义按钮的原始文件中 没有 动态编程 解决方案 和 图像 解决方案
  • 通过 HTTPS 的 WCF 服务(自托管) - 获取协商的 SSL/TLS 协议版本

    出于安全原因 我们希望在操作系统级别的服务器中禁用 TLS 1 0 支持 在以下 SChannel 注册表中 HKEY LOCAL MACHINE SYSTEM CurrentControlSet Control SecurityProvi
  • NullPointerException: int android.widget.Editor$SelectionModifierCursorController.getMinTouchOffset()

    这是一个非常奇怪的小米设备的操作系统异常 即使我确实有来自 Fabric 的可用日志 堆栈跟踪也不会引用我的任何代码 下面是 crashalytics Fabric 中报告的崩溃详细信息 21K 崩溃 小米设备上的所有崩溃 Android
  • Javascript WebRTC 库的现状? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想知道哪个框架或库最适合使用 WebRTC 这是一个小型且不完整的库 SDK 列表 任何我忘记的库 请随时告诉我 图书馆 简单RTC
  • xslt 的优雅示例?

    经过 XAML 的长时间学习循环后 我回到了 HTML 和 javascript 并意识到声明性代码的概念 就转换规则而言 是一个非常强大的概念 尽管语法过多 但 XML 的 XSLT 处理仍然是声明性转换编程的基石 然而 我总是发现很难理
  • iPhone 的网络时间协议

    我正在编写一个需要精确计时的应用程序 问完后这个问题 https stackoverflow com questions 2264197 how to accurately sync time between iphones 我决定使用 N
  • 如何在打字稿Angular 4中将字符串转换为布尔值

    我知道我不是第一个问这个问题的人 正如我在标题中提到的 我正在尝试将字符串值转换为布尔值 我之前已将一些值放入本地存储中 现在我想获取所有值并将所有值分配给一些布尔变量 应用程序组件 ts localStorage setItem Chec
  • 我可以使用 GenericServlet 在 Tomcat 上实现套接字服务器吗?

    我想实现一个将由多个客户端连接的套接字服务器 为了使实现尽可能简单 并且不必对线程和连接等进行代码管理 我想使用 Tomcat 我们已经使用 tomcat 作为我们解决方案的一部分 我确信 Tomcat 可以用于非 http servlet
  • 优化php中的大导入

    我有一个简单的导入器 它会遍历相当大的 csv 的每一行并将其导入到数据库中 我的问题是 我应该调用另一个方法来插入每个对象 生成 DO 并告诉它的映射器插入 还是应该在导入方法中对插入过程进行硬编码 复制代码 我知道最优雅的做法是调用第二
  • idea intellij maven项目无法make

    我有 Maven 项目 Maven 构建完成成功 但我无法完成这个项目 信息 取得成功 项目包含一个模块 Idea 看不到依赖关系 Error 3 38 java D Dropbox Programming java spring spri
  • Javascript垂直居中div(可变高度)

    我正在尝试使用 Javascript 将 div 垂直居中 因为文本会发生变化 所以我不能使用固定的高度 我想做这个without Jquery box2 width 100 height 100 position relative bac