Question

我试图寻找一些答案，但仍未找到任何答案。

基本上我要做的就是将我的绿色框放在我的蓝框内。

蓝色框是100％，绿色是80％，我想我只是给我的绿色框留下10％的边距，但由于某种原因它似乎不起作用。

以下是我正在谈论的内容的截图 - https://imgur.com/xaPttJM

#content_wrapper {
  height: 30rem;
  width: 100%;
  background-color: blue;
  position: relative;
  margin: 0;
}

.content {
  height: 30rem;
  width: 80%;
  background-color: green;
  position: absolute;
  margin-left: 10%;
  display: inline-block;
}

<div id="content_wrapper">
  <div class="content">

  </div>
</div>

我之前通常能够做到这一点，但我必须在某处遗漏某些东西。

提前致谢！

Answer 1

#content_wrapper {
  height: 30rem;
  width: 100%;
  background-color: blue;
  position: relative;
  margin: 0;
}

.content {
  height: 30rem;
  width: 80%;
  background-color: green;
  margin:0 auto !important;
  display: block !important;
}

这会使它水平居中继承人是一个小提琴手 https://jsfiddle.net/benF/b4w2yboy/6/

删除position:absolute;并设置display:block;并删除margin-left: 10%;然后它应该有效

注意您必须为.content元素设置一个宽度80%

Answer 2

HTML：

<div id="content_wrapper">    
    <div class="content">Your text</div>
</div>

CSS：

#content_wrapper {
  background-color: green;
  text-align: center;
}
.content {
  background-color: red;
  display: inline-block;
}

将较小的div放在较大的div中

2 个答案: