Question

我总是对在divs内定位内容和div的最佳方法感到困惑。

＆＃13;

.container {
  width: 300px;
  height: 500px;
  background: #f5f5f5;
}

.content {
  position: absolute;
  bottom: 0px;
}

＆＃13;

<div class="container">
  <div class="content">
    <h3>Title</h3>
  </div>
</div>

＆＃13;

在示例中，我希望文本位于底部和中心位置。我可以通过使用位置absoulute然后添加保证金来完成此操作。

是否有更好的方法可以避免使用absolute坐标（例如bottom，{{}将内容排除在页面布局流之外1}}等等？

Answer 1

通过flex可以实现同样的功能。这是更新的css： -

.container {
  width: 300px;
  height: 500px;
  background: #f5f5f5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

Answer 2

Flexbox非常适合这种情况（在IE11和所有其他主流浏览器上都支持）。

如果您只想影响.content的内容，请执行以下操作：

.container {
  width: 300px;
  height: 500px;
  background: #f5f5f5;
}

.content {
  /* new */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

<div class="container">
  <div class="content">
    <h3>Title</h3>
  </div>
</div>

如果您想考虑更多内容，请考虑.container的内容，您可以这样做：

.container {
  width: 300px;
  height: 500px;
  background: #f5f5f5;
  /* new */
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: flex-end;
}

<div class="container">
  <div class="content">
    <h3>Title</h3>
  </div>
  <div class="content2">
    <h3>content 2</h3>
  </div>
  <div class="content3">
    <h3>content 3</h3>
  </div>
</div>

Answer 3

您还可以将容器position属性设置为relative，然后将content类集left设置为50%：

.container {
    width: 300px;
    height: 500px;
    background: #f5f5f5;
    position: relative
}

.content {
    position: absolute;
    bottom: 0px;
    left: 50%
}

https://jsfiddle.net/kjL5a29n/3/

Answer 4

通过将绝对元素（子）放在相对放置的元素（父元素）中，子元素的位置（top|right|bottom|left）将相对于父元素而不是窗口。

像这样：

＆＃13;

.container {
  width: 300px;
  height: 500px;
  background: #f5f5f5;
  position: relative;
}

.content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="content">
    <h3>Title</h3>
  </div>
</div>

＆＃13;

在DIV中定位

4 个答案: