How to Center-Justify links in CSS? - html

Question

How can I center-justify a list of links in CSS?
This is similar to this question: How to Center-Justify text in CSS?, except using links instead of text. The fiddle from that answer there (http://jsfiddle.net/L4pzm/) doesn't work when I use links instead of text.
This is how they did it in the above fiddle:
.center-justified {
margin: 0 auto;
text-align: justify;
width: 30em;
}
Here is the fiddle I created: http://jsfiddle.net/hsm4w0p5/
<div class="center-justified"><p>
First Second<br>
Third <a href="4">Fourth Fifth</p>
</div>
As you can see in the example above, the links aren't justified. I want to make it so that the word "Second" is aligned to the right to match with the word "Fifth".

Answer 1

I don't think this is possible using text-align: justify, but can use flexbox to do something similar:
Html:
<div class="center-justified">
<div class="row">
First Second
</div>
<div class="row">
Third <a href="4">Fourth Fifth
</div>
</div>
CSS:
.center-justified {
margin: 0 auto;
width: 30em;
}
.row {
display: flex;
justify-content: space-between;
}
a {
text-decoration: none;
}
http://jsfiddle.net/czcegf2d/1/
Be sure to check the browser compatibility of flexbox (which is quite good these days) and see that it fits your needs. http://caniuse.com/#feat=flexbox

Answer 2

If you don't need to be dynamic you could target each link with the :nth-child(n) CSS selector to float left and right inside the .center-justified container.
like:
.center-justified a:nth-child(2n) {float:right}