قرار دادن عکس در وسط پیج

[manit44]

سلام

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

ممنون از دوستان.

کد CSS:

.images {
position: absolute;
margin-left: -650px;
margin-top: -650px;
left:50%;
top:50%;
height:1300px;
width:1300px;
clip: rect(590px,1600px,950px,0px);
}

.images img {
position: absolute;
width: 140%;
height: 140%;
margin-top: -150px
}

[پیام حیاتی]

مباحث Responsive رو مطالعه کنید.

[manit44]

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

[پیام حیاتی]

تصاویرتون رو در این کلاس قرار بدید :

.
main-image
{
position:relative;
margin:0 auto;
border:1px solid #000;
}


از absolute استفاده نکنید.

[Rejnev]

عرض عکسهای داخلی ثابته؟ میتونید بر اساس پیکسل بدین تا راه حل ارائه بدم:
مثال:


<div class="images">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>



.images {
position: absolute;
margin-left: -50px;
margin-top: -50px;
left:50%;
top:50%;
height:100px;
width:100px;
background:red;
}
.images .img{
position:absolute;
display:block;
margin-top:-60px;
margin-left:-60px;
top:50%;
left:50%;
width:120px;
height:120px;
border:1px solid blue;
}

لینک نمایش آنلاین (http://codepen.io/anon/pen/QwGNrJ)

[manit44]

ببینید این کد htlm ام هست و این کد css مربوط به عکسها که میخوام در هر مانیتوری با هر پیکسلی این عکسها در وسط صفحه نمایش داده شوند:

کد css:

.images{
position:absolute;
width:1300px;
height:1300px;
left:16px;
clip: rect(550px,1600px,1000px,0px);
}

.images img{
position:absolute;
width:140%;
height:140%;
}

کد html:


<div class="images">
<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="17" src="layers/17.png" />
</div>

<div class="images">
<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>

پیشاپیش ممنونم از کمک دوستان.

[ostadsho]

شما اول بایستی div ی که کلاس images داره رو بیارید وسط صفحه،بعدش حالا میتونید عکس ها رو بر اون اساس تنظیم کنید:




<style>

.images{
width:1000px;
position:absolute;
right:0;
left:0;
margin:0 auto;
background:#DD3C3F;
text-align:center;

}



</style>

[amirahmady77]

margin:auto auto;

[manit44]

ببینید من سایز عکسم 1300*1300 پیکسل هست وعرض و ارتفاع رو 140% گرفتم. میخواستم ببینم این کار درست هست یا خیر؟
اگر جواب منفی هست دوستان راهنمایی کنند چکار کنم؟

من مجددا کد css ام رو قرار میدم:

کد CSS:

.images{
position:absolute;
width:1300px;
height:1300px;
left:16px;
clip: rect(550px,1600px,1000px,0px);
}

.images img{
position:absolute;
width:140%;
height:140%;
}

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

[manit44]

خواهشا دوستان جواب بدن خیلی نیاز دارم.

[saeed410]

اگر از بوت استرپ استفاده میکنید با اختصاص دادن کلاس center-block میتوانید هر المانی را که دوست دارید وسط چین کنید. همچنین اگر میخواهید عکس ها را نیز واکنش گرا کنید تا مشکلی در نمایشگرهای کوچک به وجود نیاید کلاس img-responsive را به تگ های img خود اختصاص دهید.

[manit44]

نه من از بوت استرپ استفاده نمیکنم مستقیما از سی اس اس استفاده میکنم.
اگه میشه لطف کنید بگید چطور میتونم با سی اس اس این کار رو انجام بدم؟
ممنون.