Css issues with vertically aligning text

Question

So I am trying to make a header, but what I see is this:

So I was trying to vertically align the text (the image is out of frame) and I mostly just see Link1-5 all jumbled up together. Is there a simple fix to this?

<!DOCTYPE html>
<html>
    <head>
        <style>
            .header {padding:16pt;overflow:co}
            .headertext {color:#fff;text-decoration:none;font-weight:bold;margin: 0 10pt;position: absolute;top: 25pt;}
        </style>
    </head>
    <body class="black" style="font-family: 'Varela Round', sans-serif;">
        <div class="header purple">
            <a href="#"><img src="Image" width="40" height="40" style="object-fit:cover;"></a>
            <a href="a" class="headertext">Link</a>
            <a href="a" class="headertext">Link</a>
            <a href="a" class="headertext">Link</a>
            <a href="a" class="headertext">Link</a>
            <a href="a" class="headertext">Link</a>
        </div>
    </body>
</html>

score 1 · Accepted Answer · answered Mar 08 '20 at 17:35

Use CSS flexbox and remove the absolute positioning:

.header {
  padding: 16pt;
  background: purple;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.headertext {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  margin: 0 10pt;
}

<div class="header purple">
  <a href="#"><img src="Image" width="40" height="40" style="object-fit:cover;"></a>
  <a href="a" class="headertext">Link</a>
  <a href="a" class="headertext">Link</a>
  <a href="a" class="headertext">Link</a>
  <a href="a" class="headertext">Link</a>
  <a href="a" class="headertext">Link</a>
</div>

Css issues with vertically aligning text

1 Answers1