【问题标题】：how to position element equally from left and right sides?如何从左侧和右侧平均定位元素？
【发布时间】：2014-10-26 06:17:28
【问题描述】：

我有一个可变宽度的元素（因为屏幕分辨率不同）和 125 像素的高度。我希望它距左侧 125 像素，距右侧 125 像素。在某种程度上，它是居中的，我猜。我怎样才能做到这一点？也许我的问题措辞非常糟糕，但是当我用谷歌搜索它甚至搜索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>

还有小提琴：http://jsfiddle.net/k4tefz34/4/
非常感谢你们;o;

【问题讨论】：

标签： html css position margin

【解决方案1】：

它工作得很好，但只是您将宽度定义为 100%，所以它会导致从右侧显示。只需将 250 像素（左值 + 右值）宽度从 100% 减小，然后看到左 125 像素和右 125 像素：

#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

【讨论】：

【解决方案2】：

您必须删除 width:100%。试试这个：

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

【讨论】：

【解决方案3】：

你必须明白的是，如果某个东西的宽度是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;
}

【讨论】：

【解决方案4】：

改变你的位置不要保持不变

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

【讨论】：

【解决方案5】：

你可以用这个-

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

JSFiddle

【讨论】：

【解决方案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

【讨论】：

【解决方案7】：

像这样设置边距而不是左右值呢？

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

这将使您的 div 居中。

【讨论】：