Question

我正在尝试创建一个圆形div，当你将鼠标放在它上面时会变得更大（并且在鼠标上停下来）但我似乎无法让它在页面中保持绝对居中

function addwidth() {
  if ($(".circle").width() >= 550) {
    $(".circle").width(100);
    $(".circle").height(100);
    $('.question input').val("1");
    $(".circle").css("background-color", "red");
    $(".circle").css("margin", "450px");
  } else {

    $(".circle").width($(".circle").width() + 5);
    $(".circle").height($(".circle").height() + 5);
    $(".circle").css('margin', function(index, curValue) {
      return parseInt(curValue, 10) + -5 + 'px';
    });
    if ($(".circle").width() > 99) {
      $('.question input').val("1");
      $(".circle").css("background-color", "red");
    }
    if ($(".circle").width() > 199) {
      $('.question input').val("2");
      $(".circle").css("background-color", "orange");
    }
    if ($(".circle").width() > 299) {
      $('.question input').val("3");
      $(".circle").css("background-color", "yellow");
    }
    if ($(".circle").width() > 399) {
      $('.question input').val("4");
      $(".circle").css("background-color", "green");
    }
    if ($(".circle").width() > 499) {
      $('.question input').val("5");
      $(".circle").css("background-color", "blue");
    } else {}
  }
};


var intervalId;

function expand() {
  if (intervalId) {
    clearInterval(intervalId);
  }
  intervalId = setInterval(addwidth, 15);
};

function stopexpand() {
  clearInterval(intervalId);
};

#container1 {
  height: 100%;
  width: 100%;
}

.circle {
  background-color: black;
  margin: 450px;
  border-radius: 50%;
  behavior: url(PIE.htc);
  width: 100px;
  height: 100px;
  max-width: 550px;
  max-height: 550px;
}

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<div id="container1">
  <div class="circle" onmousedown="return expand()" onmouseup="return stopexpand()"></div>
  <div class="question"><input type="number"></div>
</div>

有关如何确保圆圈向外扩展而不是向上扩展或跨越的任何想法？（如果这是有道理的）

Answer 1

尝试在container1 css中使用flexbox：

#container1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

Answer 2

我不知道成为一个圆圈是否与它有关。但我知道这就是你将div放在页面上（或者在另一个容器中，就像另一个div）的中心，提供：

您已使用＆＃34; px＆＃34;来调整div的大小。或＆＃34;％＆＃34; （都是工作）。

从您的帖子中，您似乎确实正在调整div，并且您希望它在页面上保持居中（不是相对于鼠标居中）。

如果这是真的，我就是这样做的（当我最初发现这个解决方案的时候，我就像呃......真的那样吗？）。

.centerDiv {
   margin: auto;
   position: relative;
}

同样，这假设你已经调整了div的大小，我可能还会把它放在另一个100％的div中（水平/垂直或两者，取决于你想要做的事情）。

我在任何地方都使用它，例如，以＃34; loading＆＃34;为中心。在＆＃34; app-component＆＃34;之前的Angular2应用程序中的div已初始化。

有了这个，你应该能够调整你想要居中的div，并且它只是保持自我重新定位。

让我知道这是否有任何帮助（对圆圈事物感到好奇），如果没有，我会给出答案，但这确实是我如何去做的。

在调整大小时保持div居中

2 个答案: