مشکل در ریسپانسیو کردن این قسمت

[olampiad]

سلام و خسته نباشید به دوستان عزیز
به این تصویر یه نگا بندازید.
من تو ریسپانسیو کردم این قسمت مشکل دارم.
من در این پروژه float رو right قرار دادم و به همین خاطر li های من سمت راست هستن.
من میخوام که li ها وسط باشن.
برای این کار چیکار کنم.
ممنون

اینم تکه کد این قسمت

#index ul{
   width:100%;
   direction:rtl;
   list-style:none;
   margin:0px;
   padding:0px;
   margin-top:-9px;
   text-align:center;
}
#index li{
   position:relative;
   float:right;
   max-width:231px;
   width:100%;
   text-align:center;
   margin-top:29px;
}

[ADMIN]

شاید با clear:both کردن ul به نتیجه برسین. بهتره توی طراحی، به float بعنوان آخرین راه حل نگاه کنید.

[محسن نوری]

به جای float: right از display: inline-table استفاده کن و ul هم همونطور text-align: center بمونه.

[olampiad]

سلام و خسته نباشید.
به این تصاویر ی نگا بندازید.
من وقتی از float :right  استفاده کردنی همون حالات منظم ایجاد میشه ولی وقتی از display:inline-table; استفاده میکنم همون حالت بهم ریخنته به وجود میاد.
ب نظرتون مشکال از کجاست.
میخوام از display:inline-table; استفاده کنم تا هنگام ریسپانسیو و تغییر اندازه همیشه وسط باشه.
من سورس کد رو هم اینجا قرار میدم.

<div id="galery">
<h2><span>  </span>محصولات</h2>
<ul>

<li>
<div class="gal_img"><img src="up_img/133-thickbox_default.jpg"></div>
<h3>دنده سنگین</h3>
</li>

<li>
<div class="gal_img"><img src="up_img/1034984_762.jpg"></div>
<h3>ماشین آلات سنگبری</h3>
</li>

<li>
<div class="gal_img"><img src="up_img/d39c2fe3-1920-4500-add1-335425d7f281.JPG"></div>
<h3>سنگ ساختمانی</h3>
</li>

<li>
<div class="gal_img"><img src="up_img/133-thickbox_default.jpg"></div>
<h3>معدن سنگ</h3>
</li>

<li>
<div class="gal_img"><img src="up_img/1034984_762.jpg"></div>
<h3>ماشین آلات سنگبری</h3>
</li>

#galery ul{
width:100%;
direction:rtl;
list-style:none;
margin:0px;
padding:0px;
margin-top:-9px;
text-align:center;
}
#galery li{
position:relative;
max-width:165px;
width:100%;
border:1px solid #e1e1e1;
border-top:1px solid #f9c41c;
text-align:center;
margin:9px;
margin-top:29px;
//display:inline-table;
float:right;
border-radius:3px;
}
.gal_img{
width:135px;
height:115px;
margin:auto;
margin-top:15px;
overflow:hidden;
text-align:center;
}
#galery li img{
max-width:135px;
}
#galery h3{
background:#333;
color:#FFF;
font-family:yekan;
font-weight:normal;
margin-bottom:3px;
font-weight:normal;
font-size:15px;
padding-bottom:3px;
margin-bottom:0px;
padding-top:3px;
padding-bottom:5px;
}