Centering float items in <ul> and applying list-style-type

I am trying to display disc in nested ul items as image below

Now, the list-style-type is working but I don’t know to center float element (<li>). One thing that with the first item, the disc appears above icon. You can see my site to clarify what I say. Thank all so much for helping me.

http://thehung.esy.es/Mozzarella/menu.html

Try enclosing the unordered list inside a div and set the style to text-align:center

<div style="text-align:center;">
  <ul style="list-style-type:none;">
   ...
   ...
   ...
  </ul>
</div>

Hi,

I want to display list-stype-type but it only work with float left so then I set float left how can I center this.

Try removing the list-style-type, I only inserted that to remove the small diamond on the left of each image.

I just downloaded the page and made some adjustments:

<style type="text/css">
  .jb-categories li {display: inline-block; padding:0 2em 0 0;}
</style>

<div style="background-color:red; min-height:8em; text-align:center;">
<ul class="jb-categories" style="list-style-type:none;">

	<li style="list-style-type:none;">
			<div class="box-icon">
				<a href="#"><i class="circle-icon fa fa-android"></i>
			</div>
			<div class="tooltip">
				<span>Facebook</span>
			</div><!-- end tooltip -->
		</a>
	</li>

	<li>
		<div class="box-icon">
			<a href="#"><i class="circle-icon fa fa-android"></i></a>
		</div>
	</li>

	<li>
		<div class="box-icon">
			<a href="#"><i class="circle-icon fa fa-android"></i></a>
		</div>
	</li>
	<li>
		<div class="box-icon">
			<a href="#"><i class="circle-icon fa fa-android"></i></a>
		</div>
	</li>
	<li>
		<div class="box-icon">
			<a href="#"><i class="circle-icon fa fa-android"></i></a>
		</div>
	</li>
	<li>
		<div class="box-icon">
			<a href="#"><i class="circle-icon fa fa-android"></i></a>
		</div>
	</li>
</ul>	<!-- end categories -->

You could just give the parent display:table; and then margin:0 auto;. It will center. Probably the easiest method.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.