センター部門

Question

は、私は現在、このプラグインに取り組んでいます：https://apex.oracle.com/pls/apex/f?p=97549:3:114050913757697：

それはあなたがピンクの面積窓からドラッグ＆ドロップすることができ、組織チャートのプラグインです。グラフをドラッグアンドドロップするには、緑、赤または黄色の領域をクリックする必要があります。

current plugin state

私はこのプラグイン上の2つのリンクの問題があります。

ドラッグアンドドロップが小さすぎるためにクリックすることができ-Theエリア。クリック可能な領域を増やすために、私は赤い領域（ポストの終わりに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の位置を定義する行です（グラフのサイズは、入力されたd ata）？

Answer 1

CSSでマトリックスがどのように機能するかをよりよく理解する必要があります。

transform: matrix(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