Why does CSS 'align-items' not do anything on my website?

Question

Sorry if this is something obvious, but I've searched the internet far and wide, and couldn't find anybody with the same problem as me. I've just recently started learning HTML and CSS and am trying to vertically align the text on my website. justify-content works, but align-items does not.

I just need someone to point me in the right direction, this has left me completely hopeless.

<!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>

Thanks in advance.

for learning flex use [flex box froggy site](https://flexboxfroggy.com/), you need to increase the height of box to show items in the center, for example use `height: 100vh;` in `.center` class — MaK, Dec 18 '21 at 18:56
One more suggestion use either a div or section to wrap all elements into one and don't user style tag inside the body tag use it inside the head tag — HaryanviDeveloper, Dec 18 '21 at 19:22

score 0 · Answer 1 · answered Dec 18 '21 at 19:21

Your .center class applies to the content of the tags on which it is applied. In this case, it is applying to the h1 and a text, not the h1 and a tags themselves. Additionally, the default flex-direction is row, which means align-items is applied to the vertical (height) axis. In your case, the height is determined by the size of the content, so there's no extra vertical space for the items to be centered within.

In order to use flexbox to center your tags vertically, step one is to create a container with extra vertical space. For example, you could give the container height: 100vh;, but I used 400px in my snippet. To then center the tags within that vertical space, you could skip align-items and specify flex-direction: column; with justify-content: center;.

<!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>

score 0 · Answer 2 · answered Dec 18 '21 at 19:24

A couple of problems.

It's the parent (containing) element of the items you want to center which needs the flex and justify and align settings. In your case this is the body.

But the body has no set height so won't know what to center things on.

This snippet gives it a height of the viewport.

Also, the style element should be within the head not the body ideally.

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>

Why does CSS 'align-items' not do anything on my website?

2 Answers2