مرکزچین کردن تصویر در CSS (Image Centering)
در این راهنما شیوه های رایج «مرکزچین کردن تصویر (Image Centering)» را فقط با CSS مرور می کنیم. طبق روش های زیر می توانید تصویر را افقی، عمودی یا هم زمان در هر دو جهت در مرکز قرار دهید.
مرکزچین کردن تصویر: روش های افقی
1) استفاده از margin:auto همراه با display:block
عنصر <img> به صورت پیش فرض «inline» است؛ بنابراین margin:auto روی آن اثر ندارد. در نتیجه، آن را «block» کرده و عرض مشخص می دهیم تا به صورت افقی در مرکز قرار گیرد.
img { display: block; margin: auto; width: 50%; }نکته: عرض تصویر باید از عرض صفحه یا والد کمتر باشد تا مرکزچینی کار کند.
2) استفاده از Flexbox در والد
در این روش، تصویر داخل یک کانتینر قرار می گیرد و با display:flex و justify-content:center افقی مرکزچین می شود.
.wrapper { display: flex; justify-content: center; }
.wrapper img { width: 50%; }مرکزچینی عمودی و افقی هم زمان (True Centering)
1) Flexbox: ترکیب justify-content و align-items
برای مرکزچینی کامل، روی والد از Flexbox استفاده کنید؛ سپس با justify-content:center و align-items:center تصویر را در هر دو محور مرکز کنید. تعیین ارتفاع برای والد ضروری است.
.center-flex { display: flex; justify-content: center; align-items: center; height: 600px; border: 1px solid #000; }
.center-flex img { width: 50%; }2) Grid: استفاده از place-items:center
با CSS Grid کافی است روی والد display:grid و place-items:center بگذارید تا مرکزچینی عمودی و افقی هم زمان اعمال شود.
.center-grid { display: grid; place-items: center; height: 600px; border: 1px solid #000; }
.center-grid img { width: 50%; }نکته: برای نمایش تمام صفحه و مرکزچین در مودال ها از Flexbox استفاده کنید. نمونه مرتبط را در مودال تصویر ببینید. همچنین برای آماده سازی تصویر، صفحه استایل دهی تصویر مفید است.
هشدار: در طراحی واکنش گرا عرض تصویر را با درصد و ارتفاع را خودکار بگذارید تا کشیدگی رخ ندهد.
برای دسترسی سریع، این لینک با کلیدواژه شما: مرکزچین کردن تصویر.