如何将DIV位置设置为中心左侧200像素

时间:2012-06-20 19:50:22

标签: css positioning center

我想将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

3 个答案:

答案 0 :(得分:20)

只需从右侧(50%)定位right:50%;,然后使用margin-right:200px;example)推送它。

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 */
}

答案 1 :(得分:2)

你可以使用%和px的组合; 如果你的div宽度是300px,那么div的一半是150px。 150 + 200 = 350px;  然后使用这个

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

答案 2 :(得分:0)

您还可以使用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);