آموزش وسط چین کردن تصاویر

یکی از مواردی که هنگام طراحی زیاد با آن سروکار داریم وسط چین کردن تصاویر است. در این آموزش وسط چین کردن تصویر را هم با کدهای CSS و هم با کدهای bootstrap بررسی می کنیم.

الف- CSS

در CSS به دو روش می توان تصویر را وسط چین کرد.

روش اول: استفاده از تگ پدر (دربرگیرنده)

در این روش به تگ پدر یک کلاس دلخواه دادیم مثلا img-center

حال در فایل CSS برای این کلاس کدهای زیر را تعریف می کنیم:

.img-center{
text-align: center;
}

روش دوم: در این روش به خود تگ img یک کلاس دادیم:

حال برای کلاس img-center کدهای زیر را تعریف می کنیم:

.img-center{
width: 500px;
margin-right: auto;
margin-left: auto;
}

مقدار width البته بستگی به طرح و تصویر شما دارد.

وقتی margin از دو طرف به صورت اتوماتیک تنظیم شود تصویر در وسط قرار می گیرد.

ب- bootstrap

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

روش اول:

روش دوم:

کلاس کمکی mx-auto معادل دو دستور margin-right:auto و margin-left:auto می باشد.