Geek Answers Handbook

How to align the contents of the ul tag in the center

I tried to align the content of #refer ul content in the center of the screen using CSS.

 <div id="refer" style="border:1px solid red"> <ul> <li><a href="#" class="circlelink">One</a> </li> <li><a href="#" class="circlelink">Two</a> </li> <li><a href="#" class="circlelink">Three</a> </li> </ul> </div> .circlelink { display:block; width:100px; height:100px; border-radius:50px; font-size:20px; color:#fff; line-height:100px; text-align:center; text-decoration:none; background:linear-gradient(to bottom, #719ECE, #719FCE); } .circlelink:hover { text-decoration:none; background:#719ECE; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-transform: scale(1.05, 1.07); -moz-transform: scale(1.05, 1.07); } #refer { position:absolute; top:20%; width:100%; margin-left:auto; margin-right:auto; } #refer ul { clear:both; margin: 0; padding: 0; } #refer ul li { display:block; position: relative; float: left; height: auto; width: 200px; padding: 0; margin-left: 10px; list-style: none; text-align: center; white-space: nowrap; }

Fiddle

+4
source share
4 answers

This worked for me in your fiddle:

 * { padding:0; margin:0; } #refer { margin:20% 0 0; width:100%; /* position:absolute; top:20%; width:100%; margin-left:auto; margin-right:auto; */ } #refer ul { text-align:center; /* clear:both; margin: 0; padding: 0; */ } #refer ul li { display:inline-block; position: relative; /* float: left; */ height: auto; width: 100px; padding: 0; margin:0 50px; list-style: none; text-align: center; white-space: nowrap; border:#0f0 solid 1px; } .circlelink { display:block; width:100px; height:100px; border-radius:50px; font-size:20px; color:#fff; line-height:100px; text-align:center; text-decoration:none; background:linear-gradient(to bottom, #719ECE, #719FCE); } .circlelink:hover { text-decoration:none; background:#719ECE; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-transform: scale(1.05, 1.07); -moz-transform: scale(1.05, 1.07); }
+6
source

code: jsfiddle

All you have to do is:

  • Add text-align:center; at #refer ul
  • Change display:block; on display:inline-block; at #refer ul li
  • Remove float:left; from #refer ul li

Also, make sure that #refer ul provides min-width widths that provide the necessary width for the entire circle, to make sure it doesn't crash if the browser window is too small.

Also, it is better to remove width from #refer ul li . Let the content <a> indicate the width

+3
source

Here

 .circlelink { display:block; width:100px; height:100px; border-radius:50px; font-size:20px; color:#fff; line-height:100px; text-align:center; text-decoration:none; background:linear-gradient(to bottom, #719ECE, #719FCE); } .circlelink:hover { text-decoration:none; background:#719ECE; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-transform: scale(1.05, 1.07); -moz-transform: scale(1.05, 1.07); } #refer { position:absolute; top:20%; width:100%; margin-left:auto; margin-right:auto; text-align:center; } #refer ul { clear:both; margin: 0; padding: 0; } #refer ul li { display:inline-block; position: relative; height: auto; width: 200px; padding: 0; margin-left: 10px; list-style: none; text-align: center; white-space: nowrap; }
0
source

wrapping ul with div will help

http://jsfiddle.net/ptMwH/11/ here check this out

 <div id="refer" style="border:1px solid red"> <div class="wrapper"> <ul> <li><a href="#" class="circlelink">One</a> </li> <li><a href="#" class="circlelink">Two</a> </li> <li><a href="#" class="circlelink">Three</a> </li> </ul> </div> </div>
0
source

More articles:


All Articles