title: CSS: Text is squeezed. How can I fix it?
body: <p>I'm about to program a navigation bar. The problem is that the text in the navigation bar is squeezed.
  I think that's because of relative and absolute positioning.</p>
  
  <p>This is the code that causes this error:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.menu {
         float: right;
         position: relative;
      }
  
      div.menu a {
         text-decoration: none;
         position: absolute;
         top: 50%;
         transform: translateY (-50%);
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I need this code to center the a elements vertically.
  How do I make it that the a elements are vertically centered and the text is not squeezed together?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*****************************************************************************************************************************************/
  /************************************************************* styles.css ***************************************************************/
  /*****************************************************************************************************************************************/
  
  
  /*****************************************************************************************************************************************/
  /* *** START:Colors *** */
  /*****************************************************************************************************************************************/
  
  /*
  Blau: #1f4ebc;
  Dunkel Grau: #3d3f45;
  Hell Grau: #e5e5e5;
  Rot: #a62c21
  */
  
  /*****************************************************************************************************************************************/
  /* *** END:Colors *** */
  /*****************************************************************************************************************************************/
  
  
  /*****************************************************************************************************************************************/
  /* *** START:General Settings *** */
  /*****************************************************************************************************************************************/
  
  html{
    font-size: 62.5%;
  }
  
  body {
    margin: 0;
    font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 1.6rem;
  }
  
  * {
    box-sizing: border-box;
  }
  
  /*****************************************************************************************************************************************/
  /* *** END:General Settings  *** */
  /*****************************************************************************************************************************************/
  
  
  /*****************************************************************************************************************************************/
  /* *** START:Navigation *** */
  /*****************************************************************************************************************************************/
  
  .header-nav {
    width: 100%;
    height: 5rem;
    background-color: #3d3f45;
    font-weight: 400;
  }
  
  /* *** START: Logo *** */
  .header-nav div {
    height:100%;
    display: inline-block;
    position: relative;
  }
  
  .header-nav div img {
    height: 3rem;
    width: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left:2rem;
  }
  /* *** END: Logo *** */
  
  /* *** START: Menu *** */
  div.menu {
    float:right;
    position:relative;
  }
  
  div.menu ul {
    height: 100%;
    margin: 0;
  }
  
  div.menu ul li {
    display: inline-block;
    height:100%;
    padding: 0 1rem;
  }
  
  div.menu a {
    text-decoration: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  div.menu a:link {
    color:#fff;
  }
  
  div.menu a:visited {
    color:#fff;
  }
  
  div.menu a:hover,
  div.menu a:active {
    color:#e5e5e5;
  }
  
  .active {
    background-color: #a62c21;
  }
  /* *** END: Menu *** */
  
  
  /*****************************************************************************************************************************************/
  /* *** END:Navigation *** */
  /*****************************************************************************************************************************************/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="src/css/styles.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;!-- **************************************************************************************************************************************************** --&gt;
      &lt;!-- ***   START: Navigation *** --&gt;
      &lt;!-- **************************************************************************************************************************************************** --&gt;
  
      &lt;nav class="header-nav"&gt;
  
        &lt;!-- *** START: Logo *** --&gt;
        &lt;div class="logo"&gt;
          &lt;a href="index.html"&gt;
            &lt;img src="src/img/logo.png" alt="logo"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;!-- *** END: Logo *** --&gt;
  
        &lt;!-- *** START: Menu *** --&gt;
        &lt;div class="menu"&gt;
          &lt;ul&gt;
            &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Lorem&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Ipsum&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Dolor&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- *** END: Menu *** --&gt;
  
      &lt;/nav&gt;
  
      &lt;!-- **************************************************************************************************************************************************** --&gt;
      &lt;!-- *** END: Navigation *** --&gt;
      &lt;!-- **************************************************************************************************************************************************** --&gt;
  
  
  
  
  
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>