flex align-items are not working. I want to know what the problem is-CodePudding

<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="./slider.css">
    <title>slider</title>
</head>
<body>
    flex
    <script src="./slider.js"></script>
</body>
</html>

body {
    background-color: #927df1;
    display: flex;
    align-items: center;
    justify-content: center;
}

i watch in youtube but it's not working align-items: center;

justify-content: center; working align-items: center; not working

why? youtube it's working..... plz help

CodePudding user response：

The problem could be that you have not specified a flex-direction, which is necessary for align-items and justify-content to work. Try adding this to the body CSS:

flex-direction: column;

CodePudding user response：

It's always better to surround your content within the body with another child element.

body span {
  background-color: #927df1;
  display: flex;
  align-items: center;
  justify-content: center;
}

<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="./slider.css">
  <title>slider</title>
</head>

<body>
  <span>flex<span>
    <script src="./slider.js"></script>
</body>
</html>

CodePudding user response：

The problem is that you do not have content to apply align-items to. align-items is supposed to work on vertical alignment. what you are looking for is horizontal alignment probably. check the following fiddle to get an idea of what is happening.

body {
    background-color: #927df1;
    display: flex;
        
}
.box{
  width:200px;
  height:200px;
  border: 1px solid blue;
  display:flex;
  align-items:center;
}

<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="./slider.css">
    <title>slider</title>
</head>
<body>
<div >
  flex
</div>
<div >
  flex
</div>
<div >
  flex
</div>
    <script src="./slider.js"></script>
</body>
</html>

Edit: In case you want to use the align-items to center your content vertically, just define flex-direction property to column. Default value is row so it will align according to row height. setting it to column will align your content according to column's width.

CodePudding user response：

body {
    background-color: #927df1;
    display: flex;
        
}
.box{
  width:200px;
  height:200px;
  border: 1px solid blue;
  display:flex;
  align-items:center;
}

<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="./slider.css">
    <title>slider</title>
</head>
<body>
<div >
  flex
</div>
<div >
  flex
</div>
<div >
  flex
</div>
    <script src="./slider.js"></script>
</body>
</html>

CodePudding user response：

Your code working properly just a minor mistake. by default width and height is 100%; in this case we just simply define height as 100vh

body {
    background-color: #927df1;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100vh;
}