CSS: Text is squeezed. How can I fix it?

Question

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.

This is the code that causes this error:

div.menu {
       float: right;
       position: relative;
    }

    div.menu a {
       text-decoration: none;
       position: absolute;
       top: 50%;
       transform: translateY (-50%);
    }

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?

/*****************************************************************************************************************************************/
/************************************************************* 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 *** */
/*****************************************************************************************************************************************/

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>

    <!-- **************************************************************************************************************************************************** -->
    <!-- ***   START: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->

    <nav class="header-nav">

      <!-- *** START: Logo *** -->
      <div class="logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->

      <!-- *** START: Menu *** -->
      <div class="menu">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
        </ul>
      </div>
      <!-- *** END: Menu *** -->

    </nav>

    <!-- **************************************************************************************************************************************************** -->
    <!-- *** END: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->






  </body>
</html>

Possible duplicate of [Vertical Align Unordered List Nav Links?](https://stackoverflow.com/questions/9726209/vertical-align-unordered-list-nav-links) — Adam, Apr 11 '18 at 15:54

adprocas · Accepted Answer · 2018-04-11T16:04:57.703

I removed some of your comments to make it easier to read.

You want to remove the absolute positioning of the a elements. When you position these absolute parent elements will not act as you might expect. Your issue lies in the fact that you are absolute positioning one a tag on top of the other, and the parent element ignores the size of that element, if that makes sense.

Then you want to set the line height in order to align vertically, like so:

div.menu a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

And to make it responsive, you'll use media queries to change the line height.

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;
}

.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;
}

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;
  vertical-align: middle;
  line-height: 5rem;
}

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;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>
    <nav class="header-nav">
      <div class="logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      
      <div class="menu">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
        </ul>
      </div>
    </nav>
  </body>
</html>

@coder007, I was just using chrome dev tools and that looked like a good height. But, I have modified my answer. Refresh and you'll see that it is set to `5rem`, which is the same as the `.header-nav` — adprocas, Apr 11 '18 at 16:00
And do you know, why my code didn't worked? Because I can't find a mistake in my code. — , Apr 11 '18 at 16:02
Yes, I will update my answer. Refresh in a few minutes and read what I said about `absolute` positioning. — adprocas, Apr 11 '18 at 16:03
Do you know why the height (height:100%)property does not work in this case? Is this because the a-element is an inline element and therefore you can not change the height? — , Apr 12 '18 at 09:07
@coder007, I might do this the other way around. I would probably make the `a` (`div.menu ul li a`) to be `height: 5rem` and then let everything follow suit as you go up. I like making the child elements dictate the height. Height is a funny thing in css that acts differently depending on the type of selector you're using. — adprocas, Apr 12 '18 at 15:36

score 0 · Answer 2 · 2018-04-11T15:56:16.263

0

Try the following:

div.menu ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
  text-align: center;

}

div.menu a {
  text-decoration: none;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  vertical-align: middle;
  line-height: normal;

}

https://jsfiddle.net/FraserAllan/tcmgzg1s/8/

edited Apr 11 '18 at 15:56

answered Apr 11 '18 at 15:46

score 0 · Answer 3 · answered Apr 11 '18 at 16:56

What I do wonder is why you aren't using flex for your navigation? It would give you a lot more controle on what your trying todo:

/*! styles.css

 * Colors
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *  Blau: #1f4ebc;
 *  Dunkel Grau: #3d3f45;
 *  Hell Grau: #e5e5e5;
 *  Rot: #a62c21
 * 
 */

/* 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;
}

/* Navigation
   ========================================================================== */
.header-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

/* Logo */
.logo {
  display: flex;
  padding-left: 2rem;
}
.logo img {
  height: 3rem;
}

/* Menu */
div.menu {
  position:relative;
  display: flex;
  width: inherit;
  height: inherit;
  justify-content: flex-end;
}

div.menu ul {
  height: inherit;
  margin: 0;
  display: flex;
}

div.menu ul li {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: inherit;
  padding: 0 1rem;
}

div.menu a {
  display: flex;
  text-decoration: none;
}

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;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  
  <body>
    <!-- ***   START: Navigation *** -->
    <nav class="header-nav">
      <!-- *** START: Logo *** -->
      <div class="logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->

      <!-- *** START: Menu *** -->
      <div class="menu">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
        </ul>
      </div>
      <!-- *** END: Menu *** -->
    </nav>
    <!-- *** END: Navigation *** -->
  </body>
</html>

CSS: Text is squeezed. How can I fix it?

3 Answers3