web-dev-qa-db-ja.com

DIVの位置を中心から200ピクセル左に設定する方法

DIV 200ピクセルを中心の左側に配置したい。

現在次のコードを使用していますが、より高い解像度のディスプレイ（1920×1080など）では、DIVがずれていました。

.hsonuc {
    position: absolute;  
    top: 20px; 
    margin:auto;
    margin-left:200px;
    display:none;
}

私が達成したいこと：

Illustrating a div that is positioned 200px to the left of the center of the page

csspositioningcenter
12
Haluk ÜNAL

単に50%を右側から配置し（right:50%;）、次にmargin-right:200px;を使用してプッシュします（ 例 ）。

HTML

<div class="hsonuc">DIV</div>

CSS

.hsonuc {
    position:absolute;
    top:20px;
    right:50%; /* Positions 50% from right (right Edge will be at center) */
    margin-right:200px; /* Positions 200px to the left of center */
}
20
0b10011

％とpxの組み合わせを使用できます。 divの幅が300pxの場合、divの半分は150pxです。 150 + 200 = 350px;次にこれを使用します

margin-left:calc(50% - 350px);
3
user4410354

また、JavaScriptを使用して、ブラウザーの左側から中央に200pxのピクセル数を実際に確認することもできます。これにより、position: absoluteを使用する必要がなくなります。

例（jQuery）：

var centerMark = Math.round( $(window).width() / 2 ); //define the center of the screen
var elementWidth = $('.hsonuc').width();
var position = centerMark - 200 - elementWidth; //define where 200 left of the center is and subtract the width of the element.

//now you have `position` you can use it almost any way you like.
//I prefer to use margins, but that's all up to you.

$('.hsonuc').css('margin-left', position);
0
LuudJacobs