How to justify and center my vertical navigation links - html

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

Answer 1

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:

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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.