如何将一个动态接收文本接收并改变大小的容器中心？

发布于 2025-02-10 11:05:29 字数 1469 浏览 1 评论 0原文

基本上，这是一个简单的 joet Generator 应用其中的标题。

但是，容器本身粘在页面顶部，我无法弄清楚如何将其垂直核心到页面中间API。

我面临的问题是：

当我尝试将显示flex应用于身体并使用对齐项目时，它不会根据视口的高度垂直居中容器。

css [.scss [.scss]：

$primary-color: rgb(33, 41, 53);
$secondary-color: rgb(254, 213, 180);
$tertiary-color: rgb(214, 27, 64);
$hover-color: rgb(65, 76, 93);
$gradient-bg: linear-gradient(to bottom, $primary-color, $tertiary-color);

html {
  min-height: 100%; //for the gradient to stretch properly
}

body {
  background: $gradient-bg;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  min-height: 20rem;
  min-width: 5rem;
  background-color: $secondary-color;
  border-radius: 1.5rem;
  margin: 0 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  overflow: hidden;
}

  <body>
    <div class="container">
      <img alt="" id="ultra-laugh" />
      <div class="heading"><h1>Joke Generator</h1></div>

      <div class="joke" id="joke"></div>
      <button id="joke-button" class="btn">Get another Joke</button>
    </div>
  </body>

任何帮助将不胜感激！

原文

Basically, it is a simple Joke Generator app that gets some text from an API and then puts it in a div container on which I have applied flexbox to center the text, a button, an image, and a title which are inside of it.

However, the container itself is stuck to the top of the page and I am not able to figure out how to center it vertically to the middle of the page since the height of the container depends on the size of the text that it receives from the API.

The issue I am facing:

When I tried to apply display flex to the body and use align-items it is not centering the container vertically based on the viewport's height.

Browser Screenshot

CSS[.scss]:

$primary-color: rgb(33, 41, 53);
$secondary-color: rgb(254, 213, 180);
$tertiary-color: rgb(214, 27, 64);
$hover-color: rgb(65, 76, 93);
$gradient-bg: linear-gradient(to bottom, $primary-color, $tertiary-color);

html {
  min-height: 100%; //for the gradient to stretch properly
}

body {
  background: $gradient-bg;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  min-height: 20rem;
  min-width: 5rem;
  background-color: $secondary-color;
  border-radius: 1.5rem;
  margin: 0 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  overflow: hidden;
}

HTML:

  <body>
    <div class="container">
      <img alt="" id="ultra-laugh" />
      <div class="heading"><h1>Joke Generator</h1></div>

      <div class="joke" id="joke"></div>
      <button id="joke-button" class="btn">Get another Joke</button>
    </div>
  </body>

Any help is greatly appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

四叶草在未来唯美盛开 2025-02-17 11:05:29

在您的CSS代码中，将高度值从100％更改为100VH，这将垂直居中。

html {
  min-height: 100%;
}

body {
  background: blue;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  min-height: 20rem;
  min-width: 5rem;
  background-color: lightblue;
  border-radius: 1.5rem;
  margin: 0 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css"/>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img alt="" id="ultra-laugh" />
        <div class="heading"><h1>Joke Generator</h1></div>
  
        <div class="joke" id="joke"></div>
        <button id="joke-button" class="btn">Get another Joke</button>
      </div>
</body>
</html>

In your css code change height value from 100% to 100vh, and that will center verticaly.

html {
  min-height: 100%;
}

body {
  background: blue;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  min-height: 20rem;
  min-width: 5rem;
  background-color: lightblue;
  border-radius: 1.5rem;
  margin: 0 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css"/>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img alt="" id="ultra-laugh" />
        <div class="heading"><h1>Joke Generator</h1></div>
  
        <div class="joke" id="joke"></div>
        <button id="joke-button" class="btn">Get another Joke</button>
      </div>
</body>
</html>

回复收藏 0 原文

弥枳 2025-02-17 11:05:29

您非常接近这个！
如果您试图垂直和水平居中，请像以前一样设置宽度和高度，然后将保证金 - top和margin-left设置为您的一半width和高度是。

用以下方式更换容器类上的保证金：

margin-top: 10rem;
margin-left: 2.5rem;

希望这会有所帮助！ :)

You were so close to having this!
If you are trying to vertically and horizontally center something, set the width and height as you did, and then set the margin-top and margin-left to half of what your width and height are.

Replace your margin on your container class with this: