0

I am new to flexbox and I know this is a very simple question but i cant seem to figure it out. I am trying to align eveyrthing on the test2 div in the center but it wont align no matter what i do . I tried justify-content and align-items and not working. Below is my code any help would be really appreciated.

<div style="display: flex; flex-direction: row;">

<div style='flex-grow: 1; '>

    Test

</div>


<!--Test 2 lookign to align center-->
<div style='flex-grow: 1'>Test 2 </div>
json2021
  • 2,146
  • 2
  • 14
  • 28

2 Answers2

0

Here's a sample for your code.

#box {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:red; /* optional */
}

#box div {
  width: 100px;
  height: 100px;
  background-color:white; /* optional */
}
<div style="display: flex; flex-direction: row;">
  <div style="flex-grow: 1;">Test</div>

  <!--Test 2 lookign to align center-->
  <div id="box" style="flex-grow: 1;">
    <div>test2</div>
  </div>
</div>
Emre
  • 723
  • 6
  • 14
0

Hey I think I resolved your topic. If you have some questions you can ask me again. See you have a nice day :)

    #position{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: 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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div id="position">
        <div id="container">
            <p>Test1</p>
            <p>Test2</p>
        </div>
    </div>
</body>
</html>
MaximeCodeWeb
  • 1
  • 1