如何從左側和右側平均分配元素？

Question

我有一個元素的流體寬度（由於不同的屏幕分辨率）和125px高度。我希望它從左邊125px，右邊125px。在某種程度上，我想是以中心爲中心的。我怎麼能做到這一點？也許我很措辭我的問題，但我沒有找到答案，當我谷歌，甚至當我搜索stackoverflow。

這裏的CSS（我知道right:125px;不工作，但我增加它在你們來還挺了解我想要達到什麼效果？）：

#header { 
position:fixed; 
width:100%; 
height:125px; 
top:0; 
left:125px; 
right:125px; 
text-align:right; 
background:black; 
color:white; 
font-size:100px; } 

和這裏的HTML：

<div id="header">header</div> 

and the fiddle：http://jsfiddle.net/k4tefz34/4/
非常感謝你們; o;

Answer 1

您必須刪除寬度：100％。試試這個：

#header { 
    position:fixed; 
    height:125px; 
    top:0; 
    left:125px; 
    right:125px; 
} 

Answer 2

改變位置，不要把它固定

#header { 
    position : relative; 
    width : 100% ; 
    height : 125px; 
    top : 0 ; 
    left : 125px; 
    right : 125px; 
} 

Answer 3

它的工作很好，但只是你定義的寬度爲100％左右，這是造成從右側顯示。只是減少250個像素（左值+右值），寬度爲100％，則請參閱左125px，右125px：

#header { 
    position:fixed; 
    width: calc(100% - 250px); 
    height:125px; 
    top:0; 
    left:125px; 
    right:125px; 
    text-align:right; 
    background:black; 
    color:white; 
    font-size:100px; 
} 

demo

Answer 4

你必須undertsand是什麼，如果事情是100%的寬度，它不能有margin左右

同樣，對於fixed DIV，你不能設置頁邊距

所以，你必須減少100%寬度也position（除非你真的需要它）

demo（不position）

demo（與position）

#header { 
    position:fixed; 
    width:50%; /* anything except 100% */ 
    height:125px; 
    top:0; 
    margin-left:125px; 
    margin-right:125px; 
    text-align:right; 
    background:black; 
    color:white; 
    font-size:100px; 
} 

Answer 5

你可以使用這個 -

#header { 
    background: none repeat scroll 0 0 black; 
    color: #fff; 
    height: 125px; 
    width: 100%; 
} 
.warp { 
    margin: 0 125px 0 126px; 
    position: relative; 
} 

JSFiddle

Answer 6

我想你應該改變你HTML代碼這樣

HTML

<div id="header"> 
    <div class="sub-header">header</div> 
</div> 

CSS

#header{ 
    position:fixed; 
    width:100%; 
    top:0; 
    left:0; 
} 
    #header .sub-header{ 
     background-color:#000000; 
     color:#FF6600; 
     height:125px; 
     margin:0 125px 0 125px; 
    } 

DEMO JSFiddle

Answer 7

有關設置保證金，而不是左，右的價值觀，像這樣怎麼辦？

position:fixed; 
width:100%; 
height:125px; 
top:0; 
margin:0px 125px; 
text-align:right; 
background:black; 
color:white; 
font-size:100px; 

這將中心你的div。