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

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

به دور روش می توانیم یک تصویر را به صورت افقی وسط چین کنیم:

1. با استفاده از margin: auto

یک راه برای وسط چین کردن یک تصویر به صورت افقی در یک صفحه، این است که از دستور margin: auto استفاده کنیم. چونکه عنصر <img> یک عنصر inline است( و margin: auto تاثیری بر عناصر inline ندارد)، همچنین باید تصویر خود را با استفاده از دستور display: block به یک عنصر بلوکی(block) تبدیل کنیم. علاوه بر این، ما باید یک عرض(width) را نیز تعریف کنیم. عرض یک تصویر باید کوچکتر از عرض صفحه باشد. در زیر، یک تصویر وجود دارد که با استفاده از دستور margin: auto به صورت افقی در وسط قرار گرفته است:

img {
  display: block;
  margin: auto;
  width: 50%;
}

2. با استفاده از display: flex

یک راه دیگر برای وسط چین کردن یک تصویر به صورت افقی در یک صفحه، استفاده کردن از دستور display: flex می باشد. در اینجا، ما عنصر <img> را در درون یک عنصر <div> نگهدارنده قرار داده ایم. ما کدهای CSS زیر را در عنصر div دربردارنده، اضافه کرده ایم:

• display: flex
• justify-content: center (باعث می شود تصویر به صورت افقی در داخل ظرف div وسط چین شود)

سپس، یک عرض(width) برای تصویر مشخص می کنیم. عرض تصویر باید کوچکتر از عرض صفحه باشد. تصویر زیر،(در سایت W3schools) با استفاده از دستور display: flex در وسط صفحه قرار گرفته است:

div {
  display: flex;
  justify-content: center;
}

img {
  width: 50%;
}

وسط چین کردن یک تصویر به صورت عمودی در CSS

ما با استفاده از دستور display: flex همچنین می توانیم یک تصویر را در یک صفحه به صورت عمودی وسط چین کنیم. فرض کنید یک عنصر ظرف <div> داریم که ارتفاع آن 500px است. حالا می خواهیم تصویر خود را در این عنصر div به صورت عمودی، وسط چین کنیم. ما عنصر <img> خود را در داخل عنصر div مورد نظر قرار داده ایم. حالا کدهای CSS زیر را به عنصر div اضافه می کنیم:

• display: flex
• justify-content: center (باعث می شود تصویر مورد نظر به صورت افقی در ظرف div وسط چین شود)
• align-items: center (تصویر را به صورت عمودی در عنصر div وسط چین می کند)
• height: 600px (ارتفاع عنصر div را مشخص می کند)

سپس، یک ارتفاع(height) برای تصویر تنظیم می کنیم(این ارتفاع بای کوچکتر از ارتفاع ظرف یا همان div باشد). در زیر یک تصویر را مشاهده می کنید که به صورت عمودی وسط چین شده است:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  border: 1px solid black;
}

img {
  width: 50%;
  height: 50%;
}