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
Post a Comment