How to justify and center my vertical navigation links

Question

If I understood how Justify works, it will fill or remove the needed spacing to my words to make it the same width like the others. My problem is I want to make my links centered, and justified at the same time, I want to add some spacing so that the other links are aligned with PORTFOLIO.

enter image description here

I've tried giving the div a text-align: center, and created a class for each of my a tags and gave it a text-align: justify. Sadly, it didn't work and I'm lost.

#side-nav-menu {
    width: 40%;
    position: fixed;
    text-align: center;
    top: 50%;
    bottom: auto;
    left: auto;
    right: auto;
    transform: translate(0, -50%);
    display: none;
}

#side-nav-menu ul li a {
    text-align:justify;
    color: white;
}

EDIT:

Something like this

enter image description here

So, to clarify: You would like the left side of the 'P' in Portfolio to line up exactly with the left side of the 'R', in Resume, but you would still like these links to all be in the approximate *center* of the big gray box? Does that sound right? — Katana314, Dec 18 '14 at 21:54
@Katana314 yes, correct. Or vise-versa, the other links line up with portfolio despite having a fewer letters. Either will be okay — Michael Kenji, Dec 18 '14 at 21:55

score 1 · Answer 1 · answered Dec 18 '14 at 22:18

I think you can fiddle some with flexbox:

.container {
    width: 200px;
    height: 300px;
    padding: 5px;
    background: #555;
    color: white;
    font-size: 24px;
}

.item {
    display: flex;
    justify-content: space-between;
}

<div class="container">
    <div class="item">
        <i>F</i><i>i</i><i>r</i><i>s</i><i>t</i>        
    </div>
    <div class="item">
        <i>S</i><i>e</i><i>c</i><i>o</i><i>n</i><i>d</i>        
    </div>
    <div class="item">
        <i>L</i><i>a</i><i>s</i><i>t</i>        
    </div>
</div>

Flexbox to justify text

Josh Burgess · Accepted Answer · 2014-12-18T22:37:02.177

This was a huge pain in the ass to get to work, but here it is:

Example fiddle

Here's the relevant code:

JavaScript

$('#side-nav-menu li a').each(function() {
   var t = $(this),
       letters = $(this).text().split(''),
       width = $(this).width(),
       output = "";
    for (var i=0,l=letters.length;i<l;i++){
        output += "<span style='width:" + ((i===(l-1)) ? 0 : width/(l-1)) +"px;'>" + letters[i] + "</span>";
    }
    t.html(output);
});

CSS

body {
    background-color: #999;
    font-family: sans-serif;
}
#side-nav-menu {
    width: 200px;
    position: fixed;
    text-align: center;
    top: 50%;
    bottom: auto;
    left: auto;
    right: auto;
    transform: translate(0, -50%);
    list-style: none;
    padding: 0;
    margin: 0;
}
#side-nav-menu li {
    height: 30px;
}

#side-nav-menu li a {
    display: block;
    color: white;
    text-align: justify;
}

#side-nav-menu li a span {
    display: inline-block;
}

HTML

<ul id="side-nav-menu">
    <li>
        <a>HOME</a>
    </li>
    <li>
        <a>BLOG</a>
    </li>
    <li>
        <a>ABOUT</a>
    </li>
    <li>
        <a>RESUME</a>
    </li>
    <li>
        <a>PORTFOLIO</a>
    </li>
    <li>
        <a>PROFILES</a>
    </li>
    <li>
        <a>CONTACT</a>
    </li>
</ul>

Update - A cooler way to do it

If you're up to using a monospace font, you can do something like this:

Fiddle with monospace

Here's what's different from the first:

CSS

body {
    background-color: #999;
    font-family: monospace;
}

JavaScript

for (var i=0,l=letters.length;i<l;i++){
    output += "<span style='font-size:" + width/l +"px;'>" + letters[i] + "</span>";
}

Sample output:

by font-size

Thank you! I feel like I caused inconvenience to a lot of people today O: — Michael Kenji, Dec 18 '14 at 22:50
@Milkmannetje - Probably just have to resize the frame since he was using a percentage width, or use a fixed width in place of `width: 40%`. Change that to `width: 250px` and it'd look fine again. — Josh Burgess, Dec 19 '14 at 04:31

score 0 · Answer 3 · answered Dec 18 '14 at 21:59

0

The best way I can think of doing this would be like this (using inline styles for brevity). inline-block elements use the minimum space necessary, which can come in handy.

li {
  display: block;
  }

<div style="text-align: center; width: 100%;">
  <div style="text-align: left; display: inline-block;">
    <ul>
      <li>
        Home
      </li>
      <li>
        Blog
      </li>
      <li>Supercalafragilistic</li>
    </ul>
  </div>
</div>

answered Dec 18 '14 at 21:59

Katana314

8,429
2
28
36

I'm sorry, it wasn't what I wanted. I'm really having trouble explaining this. Basically, in your example. . I want the Supercalafragilistic to be the same width as the Home and Blog, perhaps by shrinking it? or, make the Blog and Home the same width as the Supercalafragilistic, perhaps by stretching it or adding some letter spacing. – Michael Kenji Dec 18 '14 at 22:09
Man, the only way I can think of doing that would be with JavaScript and CSS one-dimensional scaling transforms. Basically, you'd compare initial rendering widths to determine how much to resize something. Thankfully, some web browsers, Webkit at least, are able to transform fonts without pixellating them – Katana314 Dec 19 '14 at 14:21

score 0 · Answer 4 · answered Dec 18 '14 at 22:09

0

Essentially what you need is the UL (container) to be centered, while the LI (content) to be left aligned, but the way I know requires a width to be set on the container.

ul {
    display: block;
    margin: auto;
    width: 40%;}

li {
    display: block;
    text-align: left;}

To get it centered as much as possible, the width needs to be a tad wider than the longest word. You can play with the value until it's perfectly centered.

answered Dec 18 '14 at 22:09

Waxi

1,641
2
14
20

After seeing your edits, it looks like you want all words to be the same width, which my answer won't do. And I don't think there is an easy way of doing this in CSS. This sounds like you're going to need javascript to do the calculations on the fly. – Waxi Dec 18 '14 at 22:25

score 0 · Answer 5 · edited May 23 '17 at 12:20

The 'text-align: justify' styling causes the render engine to alter the width of whitespace spans so that the lines are all the same width (with the exception of the trailing orphan line). Since your anchor texts have no whitespace spans, the render engine can't do anything.

What you need to be adjusting is letter-spacing style. Here's a different StackOverflow answer with a bit of jQuery showing how it is done: Stretch text to fit width of div

I caution you however: the difference in lengths between "HOME" and "PORTFOLIO" are likely to look very odd when you make the words be the same length.

How to justify and center my vertical navigation links

5 Answers5

Example fiddle

Update - A cooler way to do it