Problem vertical centering a div on top of another another

Question

I have this code for an online chat system. I need to center the DELETE vertically but I can't find a way, plus I also need that the text do not overlay with the delete.

I already tried float, inline-block, vertical-align but nothing work and some other solutions found online, but all those are for a simple div.
My case is a div over another div side by side to others, that's why I also need to not overlay text.

Can anyone help me?

fieldset {
  text-align: center;
  border-width: 0px;
  margin-bottom: 10px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

fieldset.chat {
  width: 40%;
}

.message {
  border: 1px solid #ccc;
  padding: 7px;
  margin: 3px;
  word-wrap: break-word;
}

.sender {
  text-align: right;
  background-color: #f2f2f2;
  position: relative;
}

.receiver {
  text-align: left;
  background-color: #e0f7fa;
}

.column {
  float: left;
  margin: 0 auto;
}

.chat-box {
  border: 1px solid #ccc;
  margin-left: 10px;
  max-height: 400px;
  overflow: auto;
  margin-bottom: 3px;
}

.messagedate {
  font-size: 12px;
  color: gray;
}

.nick {
  font-size: 13px;
}

.new-message {
  width: 90%;
  margin-left: 10%
}

.send {
  display: table-cell;
  vertical-align: middle;
}

.delete {
  position: absolute;
}

.delete img {
  height: 45px;
}

.delete a:link,
a:visited {
  color: blue;
}

.delete a:hover {
  color: red;
}

<body>
  <fieldset class="chat">
    <div class="messages">
      <div class="chat-box">
        <div class="message sender">
          <div class="delete">
            <a href="chat.php?id=1"><img src="logo/delete.svg" alt="DELETE"></a>
          </div>
          <div class="nick">You wrote:</div>prova
          <div class="messagedate">28/08/2023 15:10</div>
        </div>
        <div class="message receiver">
          <div class="nick">User wrote:</div>Try me
          <div class="messagedate">28/08/2023 15:11</div>
        </div>
        <div class="message sender">
          <div class="delete">
            <a href="chat.php?id=5"><img src="img/delete.svg" alt="DELETE"></a>
          </div>
          <div class="nick">You wrote:</div>sdfdsdfsdf sdfsdfsdf jkdfjhsdfsdf sdfjkasdjkasdasd
          <div class="messagedate">28/08/2023 15:13</div>
        </div>
        <div class="message receiver">
          <div class="nick">User wrote:</div>asdasdadads
          <div class="messagedate">28/08/2023 17:44</div>
        </div>
        <div class="message sender">
          <div class="delete">
            <a href="chat.php?id=18"><img src="logo/delete.svg" alt="DELETE"></a>
          </div>
          <div class="nick">You wrote:</div>HI!
          <div class="messagedate">29/08/2023 10:58</div>
        </div>
        <div class="message sender">
          <div class="delete">
            <a href="chat.php?id=20"><img src="img/delete.svg" alt="DELETE"></a>
          </div>
          <div class="nick">You wrote:</div>Test
          <div class="messagedate">29/08/2023 13:02</div>
        </div>
      </div>
      <div class="new-message">
        <form method="POST" action="chat.php" name="send">
          <input type="hidden" value="MikeDark" name="to"><textarea name="message" class="send" style="width:81%;" placeholder="Write a message to MikeDark" required></textarea>
          <input type="submit" class="send" style="margin-left:2px;" value="SEND" name="send">
        </form>
      </div>
    </div>
  </fieldset>
</body>

In addition to the many solutions in the linked duplicates above, my advice is to not use floats. They're a dated strategy with few legitimate uses in 2023. Strip those out and implement flexbox. — isherwood, Aug 29 '23 at 14:44
@Alessandro its the flexbox system, and position: absolute, relative stuff is what you need to learn about — Playdome.io, Aug 31 '23 at 16:16

Problem vertical centering a div on top of another another

0 Answers0