如何使用position绝对位置动态创建div [英] how to center a div created dynamically with position absolute

问题描述

str.Append("<div class=\"rect\" style=\"top:" + (rectangles.ElementAt(i).Y + 50).ToString() + "px;left:" + (rectangles.ElementAt(i).X + 50).ToString() + "px;width:" + (rectangles.ElementAt(i).Width - 1).ToString() + "px;height:" + (rectangles.ElementAt(i).Height - 1).ToString() + "px;position:absolute;\"</div>");

我创建这个div和更多的div已经定位绝对，然后发送创建的html到另一个div（container）。

I am creating this div and more divs that has been positioned absolute and then send the created html to another div(container). So that it creates a map the image is attached

推荐答案

您可以将您的动态< div> 包含在父级中< div> 宽且高的 0像素，并且绝对位于页面中心， left：50％; top：50％;

You can enclose your dynamic <div> inside a parent <div> wide and tall 0 pixels and absolutely positioned at the center of the page with left: 50%; top: 50%;

CSS ： b

CSS:

.bd_container {
  position: absolute;
  height: 0;
  width: 0;
  top: 50%;
  left: 50%;
}    

#bigdiv1 {
  position: absolute;
  height: 200px; /* Static height */
  width: 200px; /* Static width */
  background: blue;
  left: -100px;
  top: -100px;
}

#bigdiv2 {
  position: absolute;
  background: orange;
}

HTML / em>

<div class="bd_container">
  <div id="bigdiv1"> <!-- Replace with your div -->
    <strong>Div 1</strong>
    <br /> With static dimensions and centered
  </div>
</div>

HTML ： p>

HTML with dynamic dimensions:

<div class="bd_container">
  <div id="bigdiv2"> <!-- Replace with your div -->
    <strong>Div 2</strong>
    <br /> With dynamic dimensions and centered
  </div>
</div>

要定位您的动态< div> 您可以使用 jQuery 的 css（）函数如下：

To positionate your dynamic <div> you can use jQuery's css() function like this:

var d2_width = parseInt($("#bigdiv2").css("width")) / 2;
var d2_height = parseInt($("#bigdiv2").css("height")) / 2;

$("#bigdiv2").css({
  "left": "-" + d2_width + "px",
  "top": "-" + d2_height + "px"
});

这是一个演示

这篇关于如何使用position绝对位置动态创建div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！