CODEWITHSUNDEEP
htmlcss
Jerry
Jerry

Reputation: 123

How to Center-Justify links in CSS?

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>
<a href="1">First </a><a href="2">Second</a><br>
<a href="3">Third <a href="4">Fourth </a><a href="5">Fifth</a></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".

Upvotes: 0

Views: 3132

Answers (2)

bumpy
bumpy

Reputation: 2002

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">
        <a href="1">First </a><a href="2">Second</a>
    </div>
    <div class="row">
        <a href="3">Third <a href="4">Fourth </a><a href="5">Fifth</a>
    </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

Upvotes: 4

liamcrean
liamcrean

Reputation: 113

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}

Upvotes: 0

Related Questions