تراز مرکز تصویر (Image Centering)
می خواهیم «تراز مرکز تصویر» را یاد بگیریم. یعنی عکس وسطِ صفحه باشد. گاهی افقی، گاهی عمودی، گاهی هر دو. با margin، flex و grid انجامش می دهیم.
وسط چین افقی با margin: auto
تصویر پیش فرض inline است. بنابراین اول آن را block می کنیم. سپس با margin: auto وسط می آید. عرض تصویر باید از صفحه کوچک تر باشد.
img {\n display: block;\n margin: auto;\n width: 50%;\n}\nوسط چین افقی با Flexbox
یک والد بساز و به آن flex بده. سپس با justify-content:center، تصویر در محور افقی وسط می آید.
div {\n display: flex;\n justify-content: center;\n}\n\nimg {\n width: 50%;\n}\nوسط چین واقعی با Flexbox (افقی و عمودی)
برای «تراز مرکز تصویر» کامل، از دو ویژگی استفاده کن: justify-content:center و align-items:center. برای والد، ارتفاع مشخص بگذار.
div {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 600px;\n border: 1px solid black;\n}\n\nimg {\n width: 50%;\n}\nوسط چین واقعی با Grid
در Grid، تراز وسط خیلی ساده است. با place-items:center همه چیز وسط می آید. باز هم برای والد، ارتفاع بده.
div {\n display: grid;\n place-items: center;\n height: 600px;\n border: 1px solid black;\n}\n\nimg {\n width: 50%;\n}\nمراحل عملی سریع
- تصویر را کوچک تر از والد تنظیم کن.
- برای margin، تصویر را block کن.
- برای Flex، والد را flex کن.
- برای وسط واقعی، ارتفاع والد بده.
- در موبایل، اندازه ها را بازبینی کن.
نکته: همیشه نسبت تصویر را حفظ کن. از height:auto کنار width:% استفاده کن تا کش نیاید.
جمع بندی سریع
- margin:auto وسط افقی ساده است.
- Flex و Grid برای هر دو محور عالی اند.
- ارتفاع والد برای وسطِ عمودی لازم است.
- عرض تصویر را منطقی انتخاب کن.
- واکنش گرا را فراموش نکن.
تراز مرکز تصویر را با استایل دهی تصاویر و مودال تصویر ترکیب کن تا نتیجه حرفه ای شود.