时间戳

首页 > 解决方案 > 如何在页面中间居中固定动态宽度和高度元素？

javascript - 如何在页面中间居中固定动态宽度和高度元素？

问题描述

我有具有动态高度和宽度的可拖动元素。它是基于内容的变化。

我有这个来居中固定元素，这里是 HTML：

<div class="option_dialog" id="profile">
  <div class="close_option">Profile <img onclick="document.getElementById('profile').style.display='none';body.style.overflow='auto'" style="float:right;height:20px" src="img/close.PNG">
  </div>
  <div class="dialog_content" id="profile_content" style="overflow:scroll;max-height:400px">
  </div>
  <button onclick="MyWall()" class="common_btn" style="width:98%">My Wall</button>
</div>

CSS：

.option_dialog {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  margin: auto;
  display: none;
  width: fit-content;
  height: fit-content;
  padding: 0;
  background: #e4e4e4;
}

.dialog_content {
  margin: 2px 2px 1px 1px;
  border: 2px solid #f5f5f3;
  border-radius: 0px;
  overflow: scroll;
  max-height: 350px;
}

js

function profile() {
  var x = document.getElementById("profile");
  x.style.display = "block";
  x.style.zIndex = "1000";
  document.body.style.overflow = "hidden";
}

可拖动代码：*我正在使用 touchpunch 来启用在触摸设备中的移动！

$(function() {
  $(".option_dialog").draggable({
    handle: ".close_option",
    stack: ".option_dialog",
    distance: 0
  });
});

它在台式机和智能手机中工作正常，但在某些手机中不居中，此外它的宽度和高度会填满整个屏幕。我用谷歌搜索但没有发现我的问题。

标签： javascriptjqueryhtmlcss

解决方案

推荐阅读