قرار دادن مرکز عکس در وسط صفحه وب

[manit44]

سلام

من 16 لایه عکس دورانی شکل دارم که میخوام اینها رو درست در مرکز صفحه وب قرار بدم اما هر کاری میکنم نمیشه و عکسها به پایین صفحه منتقل میشن ، سایز همه عکسها 1920* 1920 پیکسل هست.
باید چکار کنم که این مشکل برطرف بشه؟

خیلی ممنون میشم از دوستان اگر کمکم کنند.

کد html:


<div class="layers">
<img id="1" src="layers/1.png" />
<img id="3" src="layers/3.png" />
<img id="5" src="layers/5.png" />
<img id="7" src="layers/7.png" />
<img id="9" src="layers/9.png" />
<img id="11" src="layers/11.png" />
<img id="13" src="layers/13.png" />
<img id="15" src="layers/15.png" />

<img id="2" src="layers/2.png" />
<img id="4" src="layers/4.png" />
<img id="6" src="layers/6.png" />
<img id="8" src="layers/8.png" />
<img id="10" src="layers/10.png" />
<img id="12" src="layers/12.png" />
<img id="14" src="layers/14.png" />
<img id="16" src="layers/16.png" />
</div>

کد CSS:

.layers {
position: absolute;
width: 1920px;
height: 1920px;
clip: rect(550px,1600px,1000px,0px);
}

.layers img {
position: absolute;
width: 100%;
height: 100%;
}

تصویر عکس هنگام منتقل شدن به پایین صفحه:

127375

[manit44]

خواهش میکنم از دوستان کمک کنند من تا حالا 2 تا 3 پست گذاشتم یا کسی جواب نداده یا هر کسی که جواب داده جوابش درست نبوده.

ممنون.

[manit44]

کسی جواب نمیده؟

[پیام حیاتی]

position:relative;
margin:0 auto;

[manit44]

آقای حیاتی کد شما رو امتحان کردم نشد.

[manit44]

یه دوستی خواهشا جواب درست بده.

[پیام حیاتی]

کد CSS :

.layers {

margin:0 auto;
width:1000px;
height:115px;
border:solid 1px #000;
}

.la-pic {
margin:1% 0 0 12%;
float:left;

}

کد html :

<div class="layers">
<div class="la-pic">
<img src="1.png" width="150" height="100" />
<img src="1.png" width="150" height="100" />
<img src="1.png" width="150" height="100" />
<img src="1.png" width="150" height="100" />
<img src="1.png" width="150" height="100" />
</div>
</div>


نتیجه :
127412

[manit44]

سلام آقای حیاتی ممنون از اینکه جوابمو دادین ولی باز هم این کد کار نکرد

ببینید من کدمو به شکل زیر تغییر دادم و عکس رو در وسط صفحه مانیتور من نشون میده ولی وقتی در کامپیوتر دیگه تست میکنم عکس رو کمی بالاتر از اون چیزی که در مانیتور من هست نشون میده.
اگه ممکنه کدی رو که میزارم اشکالش رو بر طرف کنید و برام ویرایش کنید خیلی ممنون میشم

کد CSS:

.layers {
position: absolute;
width: 1920px;
height: 1920px;
top:-650px;
clip: rect(790px,1600px,1150px,0px);
}

.layers img {
position: absolute;
width: 100%;
height: 100%;
}

دوستان دیگه هم اگر کمک کنند خیلی ممنون میشم.

با تشکر از همه دوستان.

[پیام حیاتی]

برادر من شما دارید از موقعیت absolute استفاده می کنید یعنی موقعیت غیر ثابت در رزولیشن ها گذشته از این مقدار ها رو نباید منفی بدید زدید منفی 650 پیکسل،اندازه 1920px که استاندارد نیست چطور میخواین توی مانیتور width: 1400 یا سایر این اندازه رو بدون مشکل نمایش بده،مگر اینکه رسپانسیوش کنید.حالا تا بخواین رسپانسیو رو فرا بگیرید داستان میشه پس پیشنهاد می کنم برید سراغ bootstrap با استفاده از این فریمورک همه آیتم ها رو میتونید رسپانسیو کنید و در مانیتورهای مختلف مشکلی نخواهید داشت.فقط کافی کلاس های مربوطه رو بشناسید،آموزش های فارسی و زبان اصلی هم در نت هست.
http://www.w3schools.com/bootstrap/default.asp