html - How to center li tags using CSS -
im working on website , want create custom list embedded pictures links. here link website:
i want links rearrange left justified based on browser size , pictures resize based on browser size.
i'm getting re-size based on browser size, life of me cant product centered on mobile device , browser sizes.
here current html/css using this.
thanks in advance help.
html:
<div class="home-page"> <ul class="tile"> <li id="one"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/alpaca-test.jpg" alt="" /></a></li> <li id="two"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/alpaca-test.jpg" alt="" /></a></li> <li id="three"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/alpaca-test.jpg" alt="" /></a></li> <li id="four"><a href="http://google.com"><img src="http://www.skyvueranchalpacas.com/wp-content/uploads/2015/03/alpaca-test.jpg" alt="" /></a></li>
css:
/* home page tiles */ /* tiles whole */ .post-475 page type-page status-publish entry{ } div.home-page{ margin: 0 auto; padding: 0; text-align:center; } .tile{ float: left; position: relative; display: block; text-align: center; background: none; font-size: 20px; border-right: 1px solid #fff; margin-top: 8px; margin-left: -40px; line-height: 1em; padding-left: 10px; } /* indavidual list */ .tile li{ position: relative; display: inline-block; text-align: center; background: none; font-size: 20px; line-height: 60px; padding:0 10px; } /* list picture (before click) */ .tile li img { max-width: 22em; width: 100%; height: auto; }
you can centralize <li>s cahnge in css .entry-content ul. replace below given one.
.entry-content ul { display: inline-block; text-align: center; }
Comments
Post a Comment