یکی از مواردی که هنگام طراحی زیاد با آن سروکار داریم وسط چین کردن تصاویر است. در این آموزش وسط چین کردن تصویر را هم با کدهای 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 می باشد.
