將div稍微偏離中心

通常我會通過將margin設置爲auto，使用position：absolute或通過填充來完成此操作，但不幸的是這些操作在這種情況下不起作用。我需要一個div從頁面水平偏離中心大約15個像素。棘手的一點是，隨着頁面變寬，它需要正確縮放。在我看來，我需要根據中心點進行水平調整，而不是左側。我怎麼能做到這一點？謝謝。將div稍微偏離中心

來源

2011-11-03 keybored

通過正確縮放你的意思是它必須與主格一起移動？或者您希望它（字面上）縮放，例如：如果屏幕爲800px，則空間爲15px，如果是1200，則爲22px？ – Yisela

使用一個容器div，它是居中的，然後你的內容可以用gi已經margin-left:npx - 像這樣：

HTML

<div id="container"> 
    <span id="green">&nbsp;</span><br /> 
    <span id="blue">&nbsp;</span> 
</div>

CSS

#container{width:100px; margin:auto auto; background-color:red;} 
#container span{display:block; width:100%; } 
#green{background-color:green; margin-left:10px;} 
#blue{background-color:blue; margin-left:-10px;}

看到例如編寫了這裏 - http://jsfiddle.net/Xpk8A/1/

來源

2011-11-03 16:28:31 Alex

很多答案！最終這是我所做的最相似的一個，所以我猜你贏得獎品了。謝謝。 – keybored

耶！謝謝。 – Alex

給出一個包裝： margin：auto; position：absolute;

內包裝，放div：位置：相對; left：-15px; （或任何你想要的）

示例頁面將有所幫助。

來源

2011-11-03 16:23:19 circusdei

您可以絕對定位您的div並將left屬性設置爲50％。然後，將margin-left設置爲50％+ 5px（無論如何）。但是，如果你在盒子上有一個固定的寬度，這隻會起作用。例如，如果該框寬200px，則margin-left將是-115px。

來源

2011-11-03 16:25:03

，關鍵是要設置width:100%和固定margin，你可以在我的例子見下文

<style> 
div { 
background-color:red; 
height:100px; 
margin:0 auto; 
width:100%; 
margin-left:15px; 
} 
</style> 

<div></div>

來源

2011-11-03 16:25:38 Simone

<html> 
    <body> 
     <div class="centered"> 
      <div class="offcenter"> 
      </div> 
     </div> 
    </body> 
</html>

的CSS將是：

.centered 
{ 
    margin: 0 auto; 
    width:300px; 
    height:200px; 
    background-color:red; 
} 

.offcenter 
{ 
    background-color:blue; 
    width:285px; 
    height:inherit; 
    float:right; 
}

http://jsfiddle.net/evbbq/

來源

2011-11-03 16:27:32 Marnix

可以使用display:inline-block爲center的DIV然後給你的margin它。

像這樣：

.Parent{text-align:center;} 
.Child{ 
    display:inline-block; 
    text-align:left; 
    width:200px; 
    height:150px; 
    background:red; 
    margin-left:15px; 
}

檢查這個小提琴http://jsfiddle.net/Xpk8A/2/

刪除margin-left:15px然後點擊Run按鈕，在小提琴看到不同的。

來源

2011-11-03 16:35:38 sandeep

將div稍微偏離中心

回答

相關問題