javascript - 中心部门

Question

我目前正在开发这个插件:https://apex.oracle.com/pls/apex/f?p=97549:3:114050913757697 :

这是一个组织结构图插件，您可以通过粉红色区域窗口拖放它。您必须单击绿色、红色或黄色区域才能拖放图表。

current plugin state

我对此插件有两个相关问题:

-可单击拖放的区域太小。为了增加可点击区域，我扩大了红色区域(帖子末尾的html代码和css修改)。

-扩展可点击区域会导致该区域与粉红色窗口的中心不对齐，我不知道如何将它们居中。 Here is an exemple of unalignement when I enlarge red area 。您可以在橙色矩形中找到我为获得此结果所做的 css 修改。

相关Html代码:

<div id="chart-container"> <!--Pink-->
    <div class="orgchart"> <!--Green-->
        <table>            <!--Red-->
            <tbody>        <!--Yellow-->
            ...
            </tbody>
        </table>
    </div>
</div>

这些元素的 CSS 代码:

#chart-container {
    overflow: hidden;
    position: relative;
    display: inline-block;
    top: 10px;
    left: 10px;
    width: calc(100% - 24px);
    border-radius: 5px;
    text-align: center;
    background-color: pink;
    border: none !important;
    height: auto !important;
    transition: margin-left .2s ease;
}

.orgchart {
    box-sizing: border-box;
    display: inline-block;
    min-height: 202px;
    min-width: 202px;
    -moz-user-select: none;
    background-size: 10px 10px;
    border: 1px dashed transparent;
    padding: 17% !important;
    background-color: green;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);
    transform: matrix(1, 0, 0, 1, 0, 51);
}
.orgchart table {
    border-spacing: 0;
    border-collapse: separate;
    background-color: red;
    margin: 20% !important;
}

.orgchart table tbody {
    background-color: yellow;
    border-spacing: 0;
    border-collapse: separate;
    text-align: center;
}

所有这些问题都会导致这个问题:

如何使用 transform:matrix 将元素在窗口中居中，因为正是这一行定义了 div 在窗口中的位置，而不管元素的尺寸(大小)图表的内容取决于输入的数据)？

Answer 1

您需要更好地了解矩阵在 CSS 翻译中的工作原理。但如果你不想，也许最重要的是写:

变换:矩阵(1, 0, 0, 1, 71, 51);

等同于:

transform: translateX(71px)
transform: translateY(51px)

由于您的容器 div 设置为 100% 宽度，因此您无法轻松地将子元素设置为居中，因为它的起始位置始终位于左上角。也许CSS中有一个技巧可以设置百分比的中心位置，但我不知道。

用 Javascript 来做这件事非常简单。这是一个示例(您需要根据您的实际值(父容器大小、填充等)进行配置:

var parentWidth = parseFloat(getComputedStyle(document.getElementById("container")).width);
var parentHeight = parseFloat(getComputedStyle(document.getElementById("container")).height);

var elementWidth = 50;
var elementHeight = 50;

var translateX = (parentWidth / 2) - (elementWidth / 2);
var translateY = (parentHeight / 2) - (elementHeight / 2);

var child = document.getElementById("child");
child.style.webkitTransform = `matrix(1, 0, 0, 1, ${translateX}, ${translateY})`;

#container{
  width:100vw;
  height: 100vh;
  border: 1px solid blue;
}
#child {
  width: 50px;
  height: 50px;
  background: red;
}

<div id="container">
  <div id="child">
  </div>
</div>

这是否是最好的方法，我不确定，但它完成了工作 - 在父容器中使用 translate:matrix() 居中元素，该容器在初始化时没有提供确切的大小值。如果有问题等请评论。

FIDDLE

Very nice info about CSS matrix