0

I want to set child elements to center horizonatally of <div style="position: absolute">

<!DOCTYPE html>
<html>

<head>
  <style>
    #top {
      border: 1px solid yellow;
      position: relative;
      width: 100px;
      height: 100px;
    }

    #mydiv {
      border: 1px solid green;
      position: absolute;
      bottom: 0;
    }

    .item {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div id="top">
    <div id="mydiv">
      <span class="item">1</span>
      <span class="item">2</span>
      <span class="item">3</span>
    </div>
  </div>
</body>

</html>

How can I set set all three <span> in center at bottom?

Alok
  • 7,734
  • 8
  • 55
  • 100
  • 1
    I don't think https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element answers the question – DCR Mar 27 '22 at 18:51
  • 1
    Here's what I would do: add the following css to #mydv{display:flex; justify-content:center; width:inherit;} – DCR Mar 27 '22 at 18:53
  • @DCR: please help me to open this question. Thanks your CSS code works for me – Alok Mar 28 '22 at 03:13

0 Answers0