Search code examples
htmlcsstext-alignment

How do I align my links in HTML/CSS with the links to be in the same row but on opposite sides?


<div class="izplav">
  <h1 id="NS">Slavenski Pokret</h1>
  <div class="linkovi">
    <a href="Onama.html" class="link">O nama</a>
    <a href="registracija.html" class="link">Registracija</a>
    <a href="jezik.html" class="link">Jezik </a>
  </div>
</div>
<style>
  #NS {
    font-size: 10x;
    font-family: "Lobster", cursive;
    text-align: left;
    display: inline-block;
  }

  .linkovi {
    color: rgb(255, 175, 2);
    margin-right: 2px;
    text-align: right;
  }
</style>

Problem picture- as you can see it isn't in the same row


Solution

  • like this

    .izplav {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    #ns {
      font-size: 10x;
      font-family: "Lobster", cursive;
      text-align: left;
      display: inline-block;
      margin: 0;
    }
    
    .linkovi {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .linkovi a {
      display: inline-block;
      padding: 10px;
      text-decoration: none;
      text-transform: capitalize;
    }
    <!DOCTYPE html>
    <html lang="en">
    
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
    
        <body>
            <div class="izplav">
                <h1 id="NS">Slavenski Pokret</h1>
                <div class="linkovi">
                    <a href="Onama.html" class="link">O nama</a>
                    <a href="registracija.html" class="link">Registracija</a>
                    <a href="jezik.html" class="link">Jezik </a>
                </div>
        </body>
    
    </html>