用百分比50％的絕對定位

，我發現從這個一個anwswer： Absolute positioning with percentages giving unexpected results 用百分比50％的絕對定位

但得到的答覆是不完全正確顯示在我的屏幕

這裏是jsFiddle從這個問題的答案上。

#container { 
    border: 1px solid red; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    position: relative; 
} 

#item { 
    border: 1px dashed purple; 
    position: absolute; 
    left: 50%; 
}

enter image description here

我有這個問題

，50％是沒有父母的寬度的一半，如果有人可以幫助？

來源

2013-08-22 olo

50％是父母的寬度的一半。如果你看看左邊的紅色邊框和字母「T」之間的距離，那是父寬度的一半。 –

你期望它顯示什麼？ – uptownnickbrown

顯示到父母的寬度中心 – olo

它正確地將元素定位在50％ - 此時item元素的左上角處於此位置。如果你想絕對完全居中，你需要添加item寬度的一半的負左邊距：

#item { 
    border: 1px dashed purple; 
    position: absolute; 
    left: 50%; 
    margin-left: -20px; 
}

如果不打算滿足您的需求，考慮使用text-align: center和margin: 0 auto作爲一個選項代替。在你的jsFiddle中，目標並不完全清楚。

來源

2013-08-22 04:45:02 alecananian

感謝您的回答，「-20px」來自哪裏？ – olo

你的'item'元素是41px寬，所以一半是~20px。添加負左邊距會將項目20px拉到左側，使其居中。 – alecananian

使用負值不是一種好的做法。 –

就x和y像素位置而言，item div位於容器div寬度的50％處（即距100px容器左邊50px）。

如果您增加容器的寬度，您將相應地看到項目div的位置。

來源

2013-08-22 04:55:15

使用以下樣式。沒有必要絕對和負價值風格：

#container { 
    border: 1px solid red; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    text-align: center; 
} 

#item { 
    border: 1px dashed purple; 
    display: inline-block; 
    margin: 0 auto; 
}

Fiddle

來源

2013-08-22 04:59:40

謝謝，但我需要絕對和它的父母親的圖像有時 – olo

用百分比50％的絕對定位

回答

相關問題