html - How to Center-Justify links in CSS? -


how can center-justify list of links in css?

this similar question: how center-justify text in css?, except using links instead of text. fiddle answer there (http://jsfiddle.net/l4pzm/) doesn't work when use links instead of text.

this how did in above fiddle:

.center-justified { margin: 0 auto; text-align: justify; width: 30em; } 

here fiddle 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 can see in example above, links aren't justified. want make word "second" aligned right match word "fifth".

i don't think possible using text-align: justify, can use flexbox 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; } {     text-decoration: none; } 

http://jsfiddle.net/czcegf2d/1/

be sure check browser compatibility of flexbox (which quite these days) , see fits needs. http://caniuse.com/#feat=flexbox


Comments

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -