مرکز CSS بلوک های DIV: افقی و عمودی. تراز افقی و عمودی عناصر

در فرآیند چیدمان صفحات وب، وظیفه مرکزیت کردن بلوک ها بسیار رایج است. این می تواند عمودی یا افقی وسط باشد.

به عنوان مثال، اگر سایت دارای عرض ثابت است، منطقی است که آن را در مرکز پنجره مرورگر تراز کنید، زیرا این کار خواندن متن را آسان‌تر می‌کند (مخصوصاً اگر مانیتور بزرگ باشد). برخی از طرح‌ها عموماً شامل قرار دادن بلوک در مرکز پنجره مرورگر هستند، یعنی هم مرکز افقی و هم عمودی.

ابتدا اجازه دهید در مورد مرکز افقی صحبت کنیم. محبوب ترین تکنیک زمانی است که بلوک با تنظیم ابعاد سمت راست و چپ در مرکز قرار می گیرد حاشیه به "خودکار". فرض کنید می خواهیم یک بلوک را با id = "container" و عرض 860 پیکسل در مرکز قرار دهیم. در این مورد، در فایل CSS باید بنویسید:

#ظرف (
background-color:#EEE;
عرض: 860 پیکسل
حاشیه: 0 پیکسل خودکار;
}

با این حال، I.E. نسخه های قدیمی تر (به عنوان مثال 5.0) این بلوک را در مرکز قرار نمی دهند. البته، هیچ کس دیگر از چنین مرورگرهای قدیمی استفاده نمی کند (از 1800 بازدید کننده روزانه من - فقط 1)، اما در هر صورت، بهتر است آن را در آنجا نیز کار کنید :)

برای انجام این کار، عنصر والد، یعنی عنصری که بلوک خود را درون آن قرار می دهیم (معمولاً عنصر والد تگ BODY است)، باید پارامتر را تنظیم کند. text-align:center. در این صورت بلوک با مرکز تراز می شود، اما تمام محتویات آن نیز با مرکز تراز می شود، اما ما به آن نیاز نداریم. بنابراین، در داخل این بلوک، تراز پیش فرض را تنظیم می کنیم - text-align:left .

بدنه (Text-align:center)

#ظرف (
background-color:#EEE;
عرض: 860 پیکسل
حاشیه: 0 پیکسل خودکار;
text-align:left;
}

همچنین روش دیگری برای تراز افقی یک بلوک وجود دارد که بر اساس . همانطور که احتمالا می دانید، به طور پیش فرض، هر عنصر بلوکی در لبه سمت چپ عنصر والد فشار داده می شود. بنابراین، برای تراز کردن آن با مرکز نیاز دارید:

2. آن را 50 درصد از عرض پنجره مرورگر به سمت راست حرکت دهید

3. با استفاده از بالشتک منفی، آن را با فاصله ای معادل نصف عرض بلوک به سمت چپ حرکت دهید.

به این ترتیب بلوک در مرکز قرار می گیرد. برای وضوح بیشتر، ویدیوی زیر را تماشا کنید:

کد CSS مثال:

#ظرف (
background-color:#559964;
موقعیت: مطلق;
سمت چپ:50%;
margin-left:-430px;
عرض: 860 پیکسل
}

لازم به ذکر است که اگر می خواهید یک بلوک را نه نسبت به پنجره مرورگر، بلکه به عنوان مثال نسبت به بلوک دیگر قرار دهید، برای این بلوک دیگر باید تنظیم کنید موقعیت:نسبی;

فرض کنید بلوک #کانتینر ما، که باید در مرکز قرار گیرد، درون بلوک #wrap قرار دارد. سپس کد به شکل زیر خواهد بود:

#wrap(موقعیت:نسبی)

#ظرف (
background-color:#559964;
موقعیت: مطلق;
سمت چپ:50%;
margin-left:-430px;
عرض: 860 پیکسل
}

حالا بیایید به موردی نگاه کنیم که باید یک بلوک را در مرکز صفحه تراز کنید، یعنی. وسط افقی و عمودی را به طور همزمان اعمال کنید. موقعیت یابی دوباره در اینجا وارد بازی می شود. بنابراین ما نیاز داریم:

1. بلوک را روی موقعیت مطلق قرار دهید

2. آن را 50% به سمت راست و 50% به پایین ببرید و بدین ترتیب گوشه سمت چپ بالای آن را در مرکز پنجره مرورگر قرار دهید.

3. با استفاده از بالشتک منفی، آن را با فاصله ای معادل نیمی از ارتفاع بلوک به سمت بالا و با فاصله ای معادل نیمی از عرض بلوک به سمت چپ حرکت دهید.

این بلوک را در مرکز صفحه وب قرار می دهد.

فرض کنید ارتفاع بلوک ما 600 پیکسل و عرض آن 860 پیکسل است. سپس کد CSS به شکل زیر خواهد بود:

#ظرف (
background-color:#559964;
موقعیت: مطلق;
بالا:50%;
سمت چپ:50%;
margin-top: -300px;
margin-left:-430px;
ارتفاع: 600 پیکسل
عرض: 860 پیکسل
}

امیدوارم خود اصل برای شما روشن باشد.

به این درس امتیاز دهید: 1 2 3 4 5

نظرات:

من اولین نفری هستم که درس را می بینم!!!

اه... دوم =) من اخیراً در IE با این مشکل مواجه شدم، مدت زیادی رنج کشیدم)) ممنون =)

با تشکر از شما، صفحه نشانک شده)))

بسیار متشکرم، آندری، برای درس های جدید!

فقط از شما متشکرم، فکر نمی کنم چیزی برای اضافه کردن در اینجا وجود داشته باشد))

با تشکر از درس، من به معنای واقعی کلمه سعی کردم این کار را چند روز پیش انجام دهم، کمی زجر کشیدم و موقتا آن را کنار گذاشتم

اما من یک مشکل دارم: سایت در موزیل فایرفاکس نمی خواهد تراز شود، به لبه سمت چپ چسبیده است و تمام است، هیچ یک از موارد بالا کمک نمی کند (همانطور در Opera).

چرا این کار نمی کند؟ - "اگر می خواهید یک بلوک را نه نسبت به پنجره مرورگر، بلکه به عنوان مثال، نسبت به بلوک دیگر قرار دهید، برای این بلوک دیگر باید موقعیت را تنظیم کنید: relative;"

خیلی ممنون!!فقط یک غول ممنون!خدا خیرت بده!

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

آندری، لطفا یک جستجوی سایت اضافه کنید.

یک نظر اضافه کنید.

در CSS انجام برخی از کارهای به ظاهر ساده چندان آسان نیست. یکی از این موارد تراز است، یعنی. زمانی که یک عنصر باید به روشی خاص نسبت به دیگری قرار گیرد.

این مقاله راه‌حل‌های آماده‌ای را ارائه می‌کند که به ساده‌سازی کار عناصر مرکزی به صورت افقی و/یا عمودی کمک می‌کند.

توجه: در زیر هر راه حل لیستی از مرورگرها وجود دارد که نسخه هایی را که کد CSS مشخص شده در آنها کار می کند نشان می دهد.

CSS - تراز کردن در مرکز بلوک

1. تراز کردن یک بلوک در مرکز بلوک دیگر. در این حالت بلوک های اول و دوم دارای اندازه های پویا هستند.

والد ( موقعیت: نسبی؛ ) .child ( موقعیت: مطلق؛ سمت چپ: 50%؛ بالا: 50%؛ -webkit-transform: translate(-50%, -50%)؛ -moz-transform: translate(-50%) , -50%)؛ -ms-transform: translate(-50%, -50%)؛ -o-transform: translate(-50%, -50%)؛ transform: translate(-50%, -50%) ;)

• Chrome 4.0+
• فایرفاکس 3.6+
• اینترنت اکسپلورر 9+
• Opera 10.5+
• سافاری 3.1+

2. تراز کردن یک بلوک در مرکز بلوک دیگر. در این حالت بلوک دوم دارای ابعاد ثابتی است.

والد (موقعیت: نسبی؛) فرزند (موقعیت: مطلق؛ سمت چپ: 50%؛ بالا: 50%؛ /* عرض و ارتفاع 2 بلوک */ عرض: 500 پیکسل؛ ارتفاع: 250 پیکسل؛ /* مقادیر بسته به مقدار تعیین می شود در اندازه آن */ /* margin-left = - عرض / 2 */ margin-left: -250px؛ /* margin-top = - height / 2 */ margin-top: -125px; )

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 1.0+
• اینترنت اکسپلورر 4.0+
• Opera 7.0+
• Safari 1.0+

3. تراز کردن یک بلوک در مرکز بلوک دیگر. در این حالت بلوک دوم دارای ابعاد مشخص شده در درصد است.

والد ( موقعیت: نسبی؛ ) .فرزند (موقعیت: مطلق؛ /* عرض و ارتفاع 2 بلوک در % */ ارتفاع: 50%؛ عرض: 50%؛ /* مقادیر بسته به اندازه آن در % تعیین می شود * / سمت چپ: 25٪؛ /* (100٪ - عرض) / 2 */ بالا: 25٪؛ /* (100٪ - ارتفاع) / 2 */ )

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 1.0+
• اینترنت اکسپلورر 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - تراز افقی

1. تراز کردن یک عنصر بلوک (نمایش: بلوک) نسبت به دیگری (که در آن قرار دارد) به صورت افقی:

مسدود کردن (حاشیه-چپ: خودکار؛ حاشیه-راست: خودکار؛)

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 1.0+
• اینترنت اکسپلورر 6.0+
• Opera 3.5+
• Safari 1.0+

2. تراز کردن یک عنصر خط (نمایش: درون خطی) یا خط بلوک (نمایش: بلوک درون خطی) به صورت افقی:

والدین (تراز متن: مرکز؛ ) .child (نمایش: بلوک درون خطی؛)

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 3.0+
• اینترنت اکسپلورر 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - تراز عمودی

1. یک عنصر (نمایش: درون خطی، نمایشگر: بلوک درون خطی) را نسبت به دیگری (که در آن قرار دارد) در مرکز قرار دهید. بلوک والد در این مثال دارای یک ارتفاع ثابت است که با استفاده از ویژگی CSS line-height تنظیم شده است.

والد (ارتفاع خط: 500 پیکسل؛ ) .child (نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ )

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 3.0+
• اینترنت اکسپلورر 8.0+
• Opera 7.0+
• Safari 1.0+

2. وسط یک بلوک نسبت به بلوک دیگر به صورت عمودی با نمایش والد به عنوان جدول و فرزند به عنوان سلول این جدول.

والدین (نمایش: جدول؛ ) .child (نمایش: سلول جدول؛ تراز عمودی: وسط؛ )

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 1.0+
• اینترنت اکسپلورر 8.0+
• Opera 7.5+
• Safari 1.0+

اگر ترفندهای جالب دیگری یا راه حل های آماده و آماده برای تراز می دانید، آن ها را در نظرات به اشتراک بگذارید.

هنگام ایجاد طرح‌بندی صفحه وب، احتمالاً با موقعیتی مواجه شده‌اید که باید با استفاده از CSS، یک div را به صورت افقی و عمودی در مرکز قرار دهید. راه های مختلفی برای استفاده از CSS و JQuery وجود دارد.

اما ابتدا اصول اولیه:

تراز افقی با استفاده از CSS

نام کلاس(
حاشیه: 0 خودکار;
عرض: 200 پیکسل
ارتفاع: 200 پیکسل;
}

برای وسط یک div فقط به صورت افقی، باید یک عرض و یک مقدار خودکار برای حاشیه چپ و راست مشخص کنید (این یک فرم مختصر برای نوشتن خصوصیات CSS است). این روش روی عناصر بلوک (div، p، h1 و غیره) کار می کند. برای اعمال آن بر روی عناصر خطی (مانند لینک ها و تصاویر)، باید قانون دیگری بنویسید: display:block .

تراز افقی و عمودی با استفاده از CSS

قرار دادن یک div به صورت افقی و عمودی به طور همزمان کمی دشوارتر است. شما باید اندازه های div را از قبل بدانید.

نام کلاس(
عرض: 300 پیکسل
ارتفاع: 200 پیکسل;
موقعیت: مطلق;
سمت چپ:50%;
بالا:50%;
حاشیه: -100px 0 0 -150px;
}

با استفاده از موقعیت‌یابی مطلق عناصر، می‌توانیم آن را از جریان خارج کنیم و موقعیت آن را نسبت به پنجره مرورگر تنظیم کنیم. با تنظیم افست div به 50% از سمت چپ و بالای پنجره، گوشه بالا سمت چپ را نسبت به صفحه وسط می کنیم. تنها کاری که باید انجام دهید این است که div را به اندازه نیمی از عرض و ارتفاع خود به سمت چپ و بالا ببرید و یک حاشیه منفی تنظیم کنید تا کاملاً در مرکز قرار گیرد.

تراز افقی و عمودی با jQuery

همانطور که قبلاً گفته شد، روش CSS فوق فقط با divs با اندازه ثابت کار می کند. جی کوئری به کمک می آید:

// اعلان تابع:
$(window).resize(function())(
$(".class-name").css((
موقعیت: "مطلق"،
سمت چپ: ($(window).width() - $(".class-name").outerWidth())/2،
بالا: ($(window).height() - $(".class-name").outerHeight())/2
});
});
// فراخوانی تابع:
$(window).resize();

هر زمان که کاربر اندازه پنجره را تغییر دهد، این تابع در $(window).resize() عرض پنجره را محاسبه می کند. ما از outerWidth() و outerHeight() استفاده می کنیم، زیرا بر خلاف width() و height() معمولی، padding و عرض حاشیه را اضافه می کنند و اندازه را برمی گرداند. در نهایت، زمانی که اندازه پنجره تغییر می‌کند، تطبیق می‌دهیم و هنگامی که صفحه دوباره بارگذاری می‌شود، div را در مرکز قرار می‌دهیم.

اغلب وظیفه تراز کردن یک بلوک در مرکز صفحه / صفحه نمایش است، و حتی بدون اسکریپت جاوا، بدون تنظیم ابعاد سفت و سخت یا تورفتگی منفی، و به طوری که اگر بلوک از اندازه آن بیشتر شود، نوارهای پیمایش برای والدین کار کنند. . نمونه های یکنواخت زیادی در اینترنت در مورد نحوه تراز کردن یک بلوک با مرکز صفحه وجود دارد. به عنوان یک قاعده، اکثر آنها بر اساس همان اصول هستند.

در زیر راه های اصلی برای حل مشکل، مزایا و معایب آنها آورده شده است. برای درک اصل مثال‌ها، توصیه می‌کنم ارتفاع/عرض پنجره Result را در مثال‌های پیوندهای ارائه شده کاهش دهید.

گزینه 1: تورفتگی منفی.

تثبیت موقعیت مسدود کردنبا استفاده از ویژگی های بالا و سمت چپ به میزان 50% و با دانستن ارتفاع و عرض بلوک از قبل، یک حاشیه منفی را تعیین کنید که برابر با نصف اندازه است. مسدود کردن. یک نقطه ضعف بزرگ این گزینه این است که شما باید تورفتگی های منفی را بشمارید. همچنین مسدود کردنهنگامی که توسط نوارهای پیمایش احاطه شده است کاملاً درست رفتار نمی کند - به دلیل داشتن حاشیه های منفی به سادگی قطع می شود.

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ سرریز: خودکار؛ ) .block (عرض: 250 پیکسل؛ ارتفاع: 250 پیکسل؛ موقعیت: مطلق؛ بالا: 50%؛ سمت چپ : 50%؛ حاشیه: -125px 0 0 -125px؛ img (حداکثر عرض: 100%؛ ارتفاع: خودکار؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛ حاشیه: هیچکدام؛ ))

گزینه 2. تورفتگی خودکار.

کمتر رایج است، اما شبیه به اول است. برای مسدود کردنعرض و ارتفاع را تنظیم می کنیم، ویژگی ها را در بالا سمت راست پایین سمت چپ روی 0 قرار می دهیم و margin auto را تنظیم می کنیم. مزیت این گزینه نوارهای اسکرول کار است والدین، اگر دومی 100% عرض و ارتفاع داشته باشد. نقطه ضعف این روش تنظیم سفت و سخت ابعاد است.

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ سرریز: خودکار؛ ) .block (عرض: 250 پیکسل؛ ارتفاع: 250 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ سمت راست: 0؛ پایین: 0؛ سمت چپ: 0؛ حاشیه: خودکار؛ img (حداکثر عرض: 100%؛ ارتفاع: خودکار؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛ حاشیه: هیچکدام؛ ))

گزینه 3. جدول.

بیایید بپرسیم والدینسبک های جدول، سلول والدینتراز متن را در مرکز قرار دهید. آ مسدود کردنما مدل بلوک خط را تنظیم می کنیم. معایبی که ما دریافت می کنیم نوارهای پیمایش غیر کارآمد هستند و به طور کلی، زیبایی شناسی "تشبیه" جدول نیست.

والد ( عرض: 100%؛ ارتفاع: 100%؛ نمایش: جدول؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ > .inner (نمایش: سلول جدول؛ تراز متن: مرکز؛ تراز عمودی: وسط؛ ) ) .block (نمایش: بلوک درون خطی؛ img (نمایش: بلوک؛ حاشیه: هیچکدام؛ ))

برای افزودن یک اسکرول به این مثال، باید یک عنصر دیگر به طرح اضافه کنید.
مثال: jsfiddle.net/serdidg/fk5nqh52/3.

گزینه 4. شبه عنصر.

این گزینه فاقد تمام مشکلات ذکر شده در روش های قبلی است و همچنین مشکلات اصلی را حل می کند. نکته این است که والدینسبک ها را تنظیم کنید عنصر شبهقبل، یعنی 100٪ ارتفاع، تراز وسط و مدل بلوک خطی. با مسدود کردنیک مدل بلوک خط تنظیم شده است، در مرکز. به مسدود کردنزیر "نفتاد" عنصر شبه، زمانی که ابعاد اولی بزرگتر از والدین، نشان می دهد والدینفضای سفید: nowrap و اندازه فونت: 0، پس از آن مسدود کردناین سبک ها را با موارد زیر لغو کنید - فضای سفید: عادی. در این مثال، اندازه فونت: 0 برای حذف فضای بین آن لازم است والدینو مسدود کردنبه دلیل قالب بندی کد فضا را می توان به روش های دیگری حذف کرد، اما بهتر است به سادگی از آن اجتناب کنید.

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ سرریز: خودکار؛ فضای سفید: nowrap؛ تراز متن: مرکز؛ اندازه قلم: 0؛ &:قبل از ( ارتفاع: 100%؛ صفحه نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ محتوا: ""؛ ) .block (نمایش: بلوک درون خطی؛ فضای سفید: عادی؛ تراز عمودی: وسط؛ تراز نوشتاری: چپ. img (نمایش: بلوک؛ حاشیه: هیچ؛ ) )

یا اگر نیاز دارید که والدین فقط ارتفاع و عرض پنجره را بگیرد و نه کل صفحه را:

والد ( موقعیت: ثابت؛ بالا: 0؛ راست: 0؛ پایین: 0؛ چپ: 0؛ سرریز: خودکار؛ فضای سفید: nowrap؛ تراز متن: مرکز؛ اندازه قلم: 0؛ &: قبل (ارتفاع: 100%؛ نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ محتوا: ""؛ ) .block (نمایش: بلوک درون خطی؛ فضای سفید: عادی؛ تراز عمودی: وسط؛ تراز نوشتاری: چپ؛ img ( نمایش: بلوک؛ حاشیه: هیچ؛ ))

گزینه 5. Flexbox.

یکی از ساده ترین و زیباترین راه ها استفاده از فلکس باکس است. این نیازی به حرکات غیر ضروری بدن ندارد، کاملاً به وضوح ماهیت آنچه را که اتفاق می افتد توصیف می کند و بسیار انعطاف پذیر است. تنها چیزی که در انتخاب این روش ارزش به خاطر سپردن دارد، پشتیبانی از IE از نسخه 10 فراگیر است. caniuse.com/#feat=flexbox

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: ثابت؛ بالا: 0؛ چپ: 0؛ نمایشگر: انعطاف‌پذیر؛ تراز موارد: مرکز؛ تراز کردن محتوای: مرکز؛ توجیه محتوا: مرکز؛ سرریز: خودکار ) .block ( پس زمینه: #60a839; img (نمایش: بلوک؛ حاشیه: هیچ، ))

گزینه 6. تبدیل.

اگر توسط ساختار محدود شده باشیم، مناسب است و راهی برای دستکاری عنصر والد وجود ندارد، اما بلوک باید به نحوی تراز شود. تابع css translate() به کمک خواهد آمد. مقدار 50٪ موقعیت مطلق، گوشه سمت چپ بالای بلوک را دقیقاً در مرکز قرار می دهد، سپس یک مقدار ترجمه منفی بلوک را نسبت به ابعاد خودش حرکت می دهد. لطفاً توجه داشته باشید که اثرات منفی ممکن است به شکل لبه‌های تار یا سبک قلم ظاهر شوند. همچنین این روش می تواند در محاسبه موقعیت بلاک با استفاده از java-script مشکلاتی را به همراه داشته باشد، گاهی اوقات برای جبران از دست دادن 50 درصد عرض به دلیل استفاده از ویژگی چپ CSS، قانون تعیین شده برای بلوک می تواند help: margin-right: -50%؛ .

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: ثابت؛ بالا: 0؛ سمت چپ: 0؛ سرریز: خودکار؛ ) .block ( موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ تبدیل: ترجمه( -50٪، -50٪؛ img (نمایش: بلوک؛ ))

گزینه 7. دکمه.

گزینه کاربر کجا مسدود کردندر یک برچسب دکمه قاب شده است. دکمه این ویژگی را دارد که هر چیزی را که داخل آن است، یعنی عناصر مدل inline و block-line (inline-block) را در مرکز قرار دهد. در عمل من استفاده از آن را توصیه نمی کنم.

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ سرریز: خودکار؛ پس‌زمینه: هیچ‌کدام؛ حاشیه: هیچ؛ طرح کلی: هیچکدام؛ ) .block (نمایش: بلوک درون خطی؛ img (نمایش: بلوک؛ حاشیه: هیچ؛ ) )

جایزه

با استفاده از ایده گزینه 4، می توانید حاشیه های خارجی را برای آن تعیین کنید مسدود کردن، و دومی به اندازه کافی در محاصره نوارهای پیمایش نمایش داده می شود.
مثال: jsfiddle.net/serdidg/nfqg9rza/2.

همچنین می توانید تصویر را در مرکز و اگر تصویر بزرگتر است تراز کنید والدین، آن را به اندازه اندازه گیری کنید والدین.
مثال: jsfiddle.net/serdidg/nfqg9rza/3.
مثال با یک تصویر بزرگ: