为啥 CSS 'align-items' 在我的网站上没有任何作用？ [复制]

Posted

技术标签:

【中文标题】为啥 CSS \'align-items\' 在我的网站上没有任何作用？ [复制]【英文标题】：Why does CSS 'align-items' not do anything on my website? [duplicate]为什么 CSS 'align-items' 在我的网站上没有任何作用？ [复制] 【发布时间】：2022-01-21 03:28:11 【问题描述】：

对不起，如果这是显而易见的事情，但我已经在互联网上进行了广泛搜索，但找不到与我有同样问题的人。我最近刚刚开始学习 html 和 CSS，并试图垂直对齐我网站上的文本。 justify-content 有效，但 align-items 无效。

我只需要有人为我指明正确的方向，这让我完全绝望了。

<!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">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> 
</head>
<body>
    <style>
        .center 
            display: flex;
            justify-content: center;
            align-items: center;
        
        body 
            background-image: linear-gradient(to right, #432371, #9f6976);
        
        .text 
            font-family: "Open Sans";
            color: white;
            font-size: 50px;
        
        .link1 
            color: white;
            font-family: "Open Sans";
            font-size: 20px;
        
        .link2 
            color: white;
            font-family: "Open Sans";
            font-size: 20px;
        
    </style>
            <h1 class="center text">Coming Soon.</h1>
            <a class="link1 center" href="https://google.com">Link1</a> 
            <a class="link2 center" href="https://google.com">Link2</a>
</body>
</html>

提前致谢。

【问题讨论】：

为了学习flex使用flex box froggy site，你需要增加box的高度以显示居中的项目，例如在.center类中使用height: 100vh; 另一个建议使用 div 或 section 将所有元素包装成一个，并且不要在 body 标签内使用用户样式标签，在 head 标签内使用它 【参考方案1】：

您的.center 类适用于应用它的标签的内容。在这种情况下，它适用于h1 和a 文本，而不是h1 和a 标签本身。此外，默认的flex-direction 是row，这意味着align-items 应用于垂直（高度）轴。在您的情况下，高度由内容的大小决定，因此没有额外的垂直空间供项目居中。

为了使用 flexbox 使标签垂直居中，第一步是创建一个具有额外垂直空间的容器。例如，你可以给容器height: 100vh;，但我在我的 sn-p 中使用了 400px。然后要在该垂直空间内居中标记，您可以跳过align-items 并使用justify-content: center; 指定flex-direction: column;。

<!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">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> 
</head>
<body>
    <style>
        .center 
            display: flex;
            justify-content: center;
            align-items: center;
        
        .container 
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 400px;
        
        body 
            background-image: linear-gradient(to right, #432371, #9f6976);
        
        .text 
            font-family: "Open Sans";
            color: white;
            font-size: 50px;
        
        .link1 
            color: white;
            font-family: "Open Sans";
            font-size: 20px;
        
        .link2 
            color: white;
            font-family: "Open Sans";
            font-size: 20px;
        
    </style>
        <div class="container">
            <h1 class="center text">Coming Soon.</h1>
            <a class="link1 center" href="https://google.com">Link1</a> 
            <a class="link2 center" href="https://google.com">Link2</a>
        </div>
</body>
</html>

【讨论】：

【参考方案2】：

几个问题。

它是您想要居中的项目的父（包含）元素，需要 flex 和 justify 和 align 设置。在你的情况下，这是身体。

但是身体没有固定的高度，所以不知道该以什么为中心。

这个 sn-p 给它一个视口的高度。

此外，样式元素最好在头部而不是主体内。

body 
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;


body 
  background-image: linear-gradient(to right, #432371, #9f6976);


.text 
  font-family: "Open Sans";
  color: white;
  font-size: 50px;


.link1 
  color: white;
  font-family: "Open Sans";
  font-size: 20px;


.link2 
  color: white;
  font-family: "Open Sans";
  font-size: 20px;

<!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">
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>

<body>
  <style>

  </style>
  <h1 class="center text">Coming Soon.</h1>
  <a class="link1 center" href="https://google.com">Link1</a>
  <a class="link2 center" href="https://google.com">Link2</a>
</body>

</html>

【讨论】：

以上是关于为啥 CSS 'align-items' 在我的网站上没有任何作用？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

为啥我的 index.html 没有在我的 css 文件夹中使用我的 style.css？

在我的 css 中不断遇到资产预编译错误...不知道为啥

为啥 w3.css Side navbar 在我的页面上不起作用？

为啥我的网件r7800无线信号很差

extjs grid 设置行和列的css为啥在我的电脑上不行啊阿

为啥 Jquery 在我的 html 中添加内联样式？