0

I have two divs that are part of my Header component. The first div contains a title, which is centered.

The second div contains a list of items of an unknown quantity and unknown width.

I would like the 'middle' item to be aligned with the title on the first div.

Is this possible?

.div-one {
  align-items: center;
  background-color: lightblue;
  display: flex;
  height: 32px;
  justify-content: center;
  width: 100%;
}

.div-two {
  align-items: center;
  background-color: orange;
  display: flex;
  height: 32px;
  justify-content: center;
  width: 100%;
}

div > p {
  margin: 0 1em;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="div-one">
    <p>Content</p>
  </div>
  
    <div class="div-two">
    <p>A</p>
    <p>AAAAA</p>
    <p>Center</p>
    <p>A</p>
    <p>AAA</p>
  </div>

</body>

</html>
KwehDev
  • 41
  • 6

0 Answers0