Question

我基本上希望我的文本位于页面中间，并且相对于它将在的屏幕上显示字体大小。

我基本上试图整理一个可以向浏览器显示推文的应用程序，它非常简单。

到目前为止，我有HTML：

<html>
<head>

  <link rel=StyleSheet href="/static/style.css" type="text/css" media="screen">

</head>

<body>

<div id="content">
  {{ tweet }}
</div>


</body>
</html>

我正在使用填充来获取中间的文本：

html, body {
  background-color: #c13192;
  color: white;
  font-family: Arial;
  text-align: center;
  font-size: 175%;
  max-height: 100%;
}

#content {
  padding-top: 20%;
  padding-bottom: 20%;
  padding-left: 15%;
  padding-right: 15%;

}

我希望ccontent始终位于屏幕中间，而不需要页面扩展到屏幕之外。因此，不需要滚动，并且内容总是适当地调整大小以便在中间。

编辑：我想我已经成功解决了一个简单的溢出：隐藏;

Answer 1

一般情况下，不应使用填充来居中div或元素。您可以使用text-align:center;来集中很多内容。在Div上，您需要margin-left:auto; margin-right:auto;将它们置于父级中心。

html, body {
  background-color: #c13192;
  color: white;
  font-family: Arial;
  text-align: center;
  font-size: 175%;
  max-height: 100%;
}

.content {
  padding-top: 20%;
  margin-left: auto;
  margin-right:auto;
}

<html>
<head>

  <link rel=StyleSheet href="/static/style.css" type="text/css" media="screen">

</head>

<body>

<div class="content">
  I am the tweet content
</div>


</body>
</html>

Answer 2

要将某些内容置于页面的中间/中间，您可以使用select username, sum(mark) marks from your_table group by username order by marks DESC和left: 50%; top: 50%;的组合，它将水平和垂直居中。

要使字体大小相对于其所在的屏幕，您可以使用transform: translate(-50%,-50%);和vw单位。

vh

#content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: calc(1em + 1vw);
}

始终在页面中间放置文本

2 个答案: