Question

我有一个水平放置在页面中间的文本对象。我想将其放下90％。因此，如果您查看我的页面，它会稍微超出底部。我会使用margin: 330px;，但我可以肯定的是，对于每个用户，由于他们使用不同的分辨率，它会有所不同。这是我的代码，如果有人可以帮助

HTML:      
  <div id="home">
    <p>Read More</p>
  </div>

CSS:
  #home {
    width: 100%;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    text-align: center;
  }

  #home p {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 60px;
    color: #FFF;
    margin: 330px;
  }

Answer 1

使容器具有弹性盒，然后使用margin-top: auto将标题对准底部。要从底部开始，请为margin-bottom添加一个值（在示例中为10％）。如果您希望在各个屏幕尺寸上的展示位置都非常精确，请使用媒体查询。

body {
  margin: 0;
}

#home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#home p {
  font-family: sans-serif;
  font-size: 60px;
  color: #000;
  margin: auto 0 10%;
}

<div id="home">
  <p>Read More</p>
</div>

Answer 2

要使此功能正常工作，您需要使用相对长度。要将其“下放90％”，您可以使用：

margin-top: 90vh;

选中此link，您可以在那里找到所需的内容。祝你好运

Answer 3

您可以将身体设置为100％，然后使用wrapper div容纳家庭潜水上方的所有内容。使包装器div的字体减小90％。

html,
body {
  height: 100%;
  margin: 0px;
}

#main_content {
  min-height: calc(90% - 60px);
  /* Make space for the font size */
}

#home {
  clear: both;
  position: relative;
  width: 100%;
  text-align: center;
}

#home p {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  line-height: 60px;
  color: teal;
  margin: 0px;
}

<div id="main_content">
</div>
<div id="home">
  <p>Read More</p>
</div>

如何将文本对象放在页面下方90％？

3 个答案: