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

Popular posts from this blog

cakephp - simple blog with croogo -

How to group boxplot outliers in gnuplot -

bash - Performing variable substitution in a string -