1 comment

1. This looks like a vertical alignment issue, but it’s probably not. There are a couple things you can do here, though, to try to force the issue:

   1. Drop floats

      The a child elements within your li are floated. That’s not necessary and I’d recommend removing them.

   2. Fake it

      There’s no reason you have to rely on the actual document flow to display this where you want it. I’m going to warn you in advance, this one feels icky to write but works like a charm.

   On your original a elements

   • Copy the text of the a to a span, and plop it right next to the other

     Example

    <a href="/place/on/my/site">Mes chiennes</a>
    <span>Mes chiennes</span>
   

   • Set the following CSS rules:

    #nav li {
      position: relative;
    }
    #nav li span {
      visibility: hidden;
    }
    #nav li a {
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }
   

   • This is a little bit of voodoo where we make the span reserve the actual space needed for the word, and then force the element to display perfectly centered within the tab. The transform bit just drags it so the center of the element is at the top and left coordinates you provide, so feel free to play with those to get them where you want them.

   Hope that helps.

Comments are closed.