jQuery. Vertical align of a span inside an anchor. Anchor fits its table-cell container

JavaScript
1

Hi,

I have tried to resolve the problem of vertical align using jQuery (And however I don’t know if the right section to post this is CSS). The code seems to go rightly, but there is an extra space on top-left (as you can see running the jsfiddle link), and it seems to be caused by the negative padding-top, but that negative padding-top is useful in this case. Please can you help me?

Here my fiddle:
jsfiddle.net/framj00/ww84a2y5/

Here my JS:

$( document ).ready(function() {
   $( "span" ).each(function() {
      var h = $(this).height();

      var h2 = eval(h/2);

      $(this).css( {
         "position": "relative",
         "top": "50%",
         "margin-top": "-" + h2 + "px"
      });


   });
});

Here my HTML code:

<!DOCTYPE html>
<html lang="it">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
     <link href="include/layout.css" rel="stylesheet">
     <script src="include/jquery/jquery-1.12.3.min.js"></script>
     <script src="include/js/nav.js"></script>
   </head>
   <body>
      <ul>
         <li>
            <a href=''><span>Some text here, some text</span></a>
         </li>
         <li>
            <a href=''><span>Some text here, some<br>text 2222222</span></a>
         </li>
      </ul>
   </body>
</html>

Here my CSS:

html, body {
   margin: 0;
   padding: 0;
}

ul {
   margin: 0;
   padding: 0;
   height: 83px;
   border: 1px solid green;
   display: table;
   width: 100%;
}

ul li {
   list-style-type: none;
   background: salmon;
   height: 100%;
   width: 50px;
   text-align: center;
   vertical-align: middle;
   display: table-cell;
}

ul li a {
   width: 100%;
   height: 100%;
   display: inline-block;
   background: green;
}

ul li a span {
   position: relative;
   display: block;
   background: mediumaquamarine;
}

Many thanks!

2

It’s because the height of the span on the first link will be smaller than the height for the span on the second link.

I’m sure there’s a better approach, but a quick and dirty way to vertically center the spans would be to get rid of the javascript entirely and just use this on the span.

ul li a span {
   min-height: 50%;
   position: relative;
   top: 25%; bottom: 25%;
   display: block;
   background: mediumaquamarine;
}
1 Like
3

Hi,

If you want equal height links than I would do it like this.

It does ma massaging the html structure to fit.

4

Many thanks!

Dave, I think that using your method the spans aren’t vertically centered.

The solution of PaulOB do that prefectly, even if any span has been used!

5

The spans are vertically centered (which is what you asked for)…the text inside the spans is NOT. I was just trying to give you what you asked.for based on your current HTML. @PaulOB is just the css/html ninja who knows what you’re actually looking to do…

6

Yeah! In fact even if the PaulOB solution goes right, I have to change my html. In fact it doesn’t include unordered list for navigation and anchors within, and they are present in your code!! So, Dave, your solution is the best till now! Can you center also the text within?

7

You don’t need an unordered list inside the nav element unless course you can’t change the html. The nav element is meant to wrap navigation items and although most people insert ul inside a nav that is just wasted html.

It can be done using a ul but then you need a certain structure all the same.

I’m assuming you wanted the links to fill the cell otherwise you don’t need the inner nested table approach.

You might want to do search on the forums as we had this question before and I provided the nav version and Erik J had had an unordered list solution.

1 Like
8

That’s what I looking for! I have another question, using nav and anchors, is it possible to do nested links, or at least nested links semantically correct?

9

It depends on exactly what you mean?

As far as nesting anchors goes then no you can’t do that as it is invalid and a link can only have one destination so nesting makes no sense.

If on the other hand you want to wrap a link around a heading and some text then yes you are now allowed to do that in html5. The same rules apply though in that you cannot have nested links inside that parent anchor.

If you want to have little ‘link islands’ (for want of a better word) inside a bigger target area then you could absolutely place the anchor element on top of another anchor element and that would work if the design allowed.

It all depends on what you want to do exactly?

10

navigation bar structured like this,

<ul>
   <li><span>Open nested menu</span>
      <ul>
         <li>
            <a>Sub link 1</a>
         </li>
         <li>
            <a>Sub link 2</a>
         </li>
      </ul>
   </li>
</ul>

do they can be realized using the method you posted?

11

So, at the end, is it possible to do the same using a jQuery function? (I know that CSS way is better, but, I would want to remove this little doubt! :wink: )

12

You almost never want to use js for doing css work. It will make the page slow down and be awkward to use and there is no need. If you find that you need js to do something like this then think again as you are most certainly taking the wrong approach to the problem.

Which items are to be vertically aligned? The span and the links or just the links?

Do you have a drawing of the desired result.

What needs to be aligned?

Just the text?

The whole block including background colour?

Does the whole background need to be a clickable area as in my example?

There are so many variables here that its hard for me to give you one answer:)

Here’s another version.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.