سلام و خسته نباشید به دوستان عزیز
به این تصویر یه نگا بندازید.
من تو ریسپانسیو کردم این قسمت مشکل دارم.
من در این پروژه 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;
}
شاید با clear:both کردن ul به نتیجه برسین. بهتره توی طراحی، به float بعنوان آخرین راه حل نگاه کنید.
به جای float: right از display: inline-table استفاده کن و ul هم همونطور text-align: center بمونه.
سلام و خسته نباشید.
به این تصاویر ی نگا بندازید.
من وقتی از 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;
}