如何定位具有相同边距的 div 左、右和上

Posted 2023-03-06

【中文标题】如何定位具有相同边距的 div 左、右和上

【英文标题】：How to position a div with equal margins for left, right, and top

【发布时间】：2015-07-09 11:50:45

【问题描述】：

我想实现如下所示的布局：

我对仅使用 css/html 的解决方案感兴趣，因此不需要 javascript。

两个 div 的宽度都是动态的，所以我不能使用任何静态边距。

div 的边和顶部之间的间距应该相同。

我尝试在内部 div 上使用 margin: auto auto 0 auto，正如您在此 jsfiddle 中看到的那样，但它仅适用于左右。

【问题讨论】：

我认为这不可能只用 html 和 css。但是您当然可以使用 javascript 来完成（尽管您需要自己跟踪大小何时改变，因为单个元素上没有调整大小事件）。

@sdcr，当然，如果您可以通过固定高度假设解决问题，我很乐意看到它

【参考方案1】：

注意，下面的尝试并不能完全回答问题，因为孩子的width 不能是动态的。

这个想法是对孩子使用百分比width + 百分比margin-top 值。这是一个响应式布局，查看代码中的 cmets，并在不同的窗口大小上尝试一下。

JSFiddle： http://jsfiddle.net/jkoycs6e/

body 
    margin: 0;

.outer 
    height: 100vh; /*for demo only*/
    background: teal;
    overflow: auto;

.inner 
    width: 80%;
    background: gold;
    margin: auto;
    margin-top: 10%; /* 100%-80%/2 */

<div class="outer">
    <div class="inner">
        hello<br/>hello<br/>hello
    </div>
</div>

【讨论】：

最接近答案的东西，但你是对的，这仍然对我不起作用，因为宽度是完全动态的。不过谢谢，我一直认为 margin-top 作为 % 是相对于 height 的，但它实际上适用于 width。

@vivekmaharajh 正确的边距和填充总是相对于父母的宽度，而不是高度。我真的怀疑是否有可能用纯 css 完全回答它，但祝你好运。

【参考方案2】：

这是不可能的。至少不是不使用javascript。没有纯 CSS 的解决方案。

【参考方案3】：

如果您将 align="center" 放在 div 中，您每次都会到达屏幕中间，但 HTML5 不支持它，因此我建议使用 50:50 方法。

div

 text-align:center;
 margin-top:50%;
 margin-bottom:50%;

希望对您有所帮助。 ^^

【讨论】：

抱歉，我不想让内部 div 垂直居中。我试图仅将其水平居中，然后将其移动到外部 div 的顶部（加上将其居中所需的边距）。看我上面的图片，它不是垂直居中的。

我一直在阅读this 文章，基本上你想要做的事情是不可能仅使用 CSS 和 HTML。

【参考方案4】：

将外部父级的溢出设置为 auto 并给您的 margin-top 一个相对值。像这样的：

.outer 
    background: blue;
    overflow: auto;

.inner 
    background:yellow;
    width: 100px;
    height: 100px;
    margin: 1em auto 0 auto;

<div class="outer">
    <div class="inner">
    </div>
</div>

【讨论】：

其实这并不能保证左右边距等于上边距。也许这是不对的。

【参考方案5】：

这似乎有效：

.outer 
    height: 500px;
    width: 300px;
    background: blue;
    position: relative;


.inner 
    width: 80%;
    height: 200px;
    background:green;
    position: absolute;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
    margin-bottom: 0;

您可以根据预期的 k 值更改为边距标记的百分比。

这是fiddle

编辑：请注意，inner 的 width 必须按照百分比进行设置才能正常工作。另请注意，当按百分比指定边距时，边距的值将计算为容器 宽度 的百分比。即使对于垂直边距，百分比也适用于容器的宽度（而不是高度）。

这是一个SO post，它有助于理解如何相对于容器定位元素。

【讨论】：

对不起，我不能用这个。请注意，在我的问题中，我说外部和内部的宽度是动态的和未知的。

但是一旦你修复了（a）外部的宽度和（b）k的值（对于边距），这自动意味着内部的宽度已经固定为宽度的百分比外的。这就是原因，inner的宽度需要是百分比

这里有3个参数：（i）外层宽度（ii）内层宽度和（iii）k。修复其中两个后，第三个会自动固定为某个值。

我无法修复 (i) 或 (ii)，因为我正在进行响应式设计，其中元素的宽度会随着页面大小的调整而变化。

好的。在这种情况下，我想你需要使用 javascript。因为我不认为 CSS 提供了一种方法来指定相对于左右边距的上边距。

【参考方案6】：

这个答案实际上并没有使用margin 属性，也不是只有两个div。

body 
    font-size: 26px;
    text-align: center;
    font-family: monospace;
  


  #container 
    display: inline-block;
    position: relative;
    width: 100%;
  

  #dummy 
    margin-top: 20%;
  

  #element 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver
    /* show me! */
  

  #wrapper 
    display: table;
    width: 100%;
  

  #row 
    display: table-header-group;
  

  #left 
    display: table-cell;
    background-color: chartreuse;
    width: 20%;
  

  #incenter 
    display: table-cell;
    background-color: aqua;
  

  #right 
    display: table-cell;
    background-color: chartreuse;
    width: 20%;
  

<div>
    <div id="container">
      <div id="dummy"></div>
      <div id="element">
        k (20%)
      </div>
    </div>
    <div id="wrapper">
      <div id="row">
        <div id="left">width = k (20%)</div>
        <div id="incenter">incenter</div>
        <div id="right">width = k (20%)</div>
      </div>
    </div>
  </div>

另一个以像素为单位的示例是here。

解释参考：

https://***.com/a/12121309/2534513

https://***.com/a/6615994/2534513

我实际上结合了上述两个答案中提到的技术来制作这个。 使用 JavaScript 会容易得多。

【讨论】：

看起来你已经实现了@sdcr 在他的回答中所做的相同的事情。问题在于它假设内部 div 的宽度固定为外部 div 的 60%。在我的问题中，您会看到宽度是独立且动态的。

是的，内部 div 将是可用总宽度的 60%，但我很确定它可以进一步调整，看到我包含的 JSFiddle 链接了吗？