59

左上の点ではなく、要素の中心点によってコードを配置するように指示することは可能ですか? 親要素がある場合

width: 500px;

そして私の子要素は

/*some width, for this example let's say it's 200px*/
position: absolute;
left: 50%;

配置に基づいて50%、子要素は親の中央にあり、150px両側に空きスペースがあると想定されます。ただし、そうではありません。親の幅に移動するのは子の左上のポイントである50%ため、子の幅全体200pxがそこから右に移動し、左側に空きスペースが残り、右側250pxにのみ空きスペースが残ります50px.

だから、私の質問は、中心の位置を達成する方法ですか?

私はこの解決策を見つけました：

position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;

しかし、要素の幅ごとに手動で編集する必要があるため、好きではありません。グローバルに機能するものが欲しいです。

(たとえば、Adobe After Effects で作業する場合、オブジェクトの位置を設定し、その位置に配置されるそのオブジェクトの特定のアンカー ポイントを設定できます。キャンバスが1280px広い場合は、オブジェクトを配置して640px、オブジェクトの中心をアンカー ポイントとして選択すると、オブジェクト全体が1280px広いキャンバスの中心に配置されます。)

CSSで次のようなものを想像します：

position: absolute;
left: 50%;
horizontal-anchor: center;

同様にhorizontal-anchor: right、要素を右側に配置するため、コンテンツ全体が親の50%幅の点から左側になります。

そして、同じことが にも当てはまりますvertical-anchor。

では、 CSS のみを使用して(スクリプトを使用せずに) 、このようなことは可能でしょうか?

ありがとう！

4

7 に答える 7

79

要素を絶対的に配置する必要があり (したがって、margin: 0 auto;センタリングには使用できません)、スクリプトを使用することが問題外である場合は、CSS3 変換を使用してこれを実現できます。

.centered-block {
    width: 100px; 
    left: 50%; 
    transform: translate(-50%, 0); 
    position: absolute;
}

いくつかの例については、このフィドルを参照してください。重要な部分:left: 50%;ブロックを親の途中まで押します (そのため、前述のように左側が 50% マークにあります)。transform: translate(-50%, 0);ブロックをその幅の半分だけx軸に沿って (左に) 引き戻し、親の中心に配置します。

于 2013-03-10T23:05:05.270 に答える
0

left:50% は、この div の重心を左に 50% センタリングしません。これは、親要素の左境界線と左境界線の間の距離であるため、基本的にはいくつかの計算を行う必要があります。

left = Width(parent div) - [ Width(child div) + Width(left border) + Width(right border) ]

left = left / 2

したがって、Javascript関数を実行できます...

function Position(var parentWidth, var childWith, var borderWidth)
{
      //Example parentWidth = 400, childWidth = 200, borderWidth = 1
      var left = (parentWidth - ( childWidth + borderWidth));
      left = left/2;
      document.getElementById("myDiv").style.left= left+"px";
}
于 2013-03-10T22:45:45.863 に答える