Question

我目前正在使用此插件：https://apex.oracle.com/pls/apex/f?p=97549:3:114050913757697：

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

我在这个插件上有两个相关的问题：

- 您可以点击拖放的区域太小。为了增加可点击区域，我花费了红色区域（帖子末尾的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翻译中的工作原理。但如果你不想，也许最重要的是通过写作：

transform: matrix(1, 0, 0, 1, 71, 51);

与：

相同

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

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

使用Javascript进行操作非常简单。这是一个示例（您需要根据您的实际值（父容器大小，填充等）进行配置：

＆＃13;

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})`;

＆＃13;

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

＆＃13;

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

＆＃13;

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

FIDDLE

Very nice info about CSS matrix

中心部门

1 个答案: