به دنبال وسط یک تصویر با استفاده از CSS هستید؟ مسائل همسویی اغلب منبع ناامیدی برای طراحان وب است. خوشبختانه، وسط یک تصویر با CSS بسیار ساده است، و ما به شما نشان خواهیم داد که چگونه این کار را در چند مرحله انجام دهید.
به دنبال وسط یک تصویر با استفاده از CSS هستید؟ مسائل همسویی اغلب منبع ناامیدی برای طراحان وب است. خوشبختانه، وسط یک تصویر با CSS بسیار ساده است، و ما به شما نشان خواهیم داد که چگونه این کار را در چند مرحله انجام دهید.
مانند بسیاری از کارهای طراحی وب، بیش از یک راه برای انجام این کار وجود دارد! ما در این مقاله به سه روش اصلی خواهیم پرداخت. بیایید شروع کنیم!
1. از ویژگی margin استفاده کنید
تنظیم ویژگی margin یکی از ساده ترین راه ها برای مرکز افقی تصویر با استفاده از CSS است. حاشیه ها جزء اصلی مدل جعبه CSS هستند.
ابتدا باید عنصر تصویر را از یک درون خطی به یک بلوک تبدیل کنید. عناصر HTML سطح بلوک تمام عرض عنصر والد خود را اشغال می کنند و می توانند کل عرض یک صفحه را اشغال کنند.
با تبدیل یک عنصر تصویر به یک عنصر بلوک، می‌توانید موقعیت آن را با تنظیم حاشیه‌های افقی تغییر دهید. همچنین باید یک عرض مشخص برای تصویر تعیین کنید تا مشخص کنید که تصویر چقدر فضای صفحه را اشغال می کند.
هر عرضی که انتخاب می کنید، تصویر باید دارای حاشیه های چپ و راست برابر باشد. شما می توانید با دادن مقدار auto به ویژگی margin به راحتی به این امر دست یابید:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
}
2. از طرح بندی Flexbox استفاده کنید
این روش مستلزم قرار دادن تصویر در یک عنصر سطح بلوک، معمولاً یک div است:
<div class="center">
<img src="xyz.jpg">
</div>
پس از انجام این کار، می توانید برخی از ویژگی ها را برای دستکاری ظاهر آن اضافه کنید. شما از دو ویژگی CSS استفاده خواهید کرد.
اولین مورد، ویژگی display است که مقدار آن روی flex تنظیم شده است. همچنین می توانید از flex برای تراز کردن عناصر در HTML استفاده کنید. ویژگی دومی که به div خود اضافه می کنید justify-content است که مقدار آن در مرکز مانند این است:
div.center {
display: flex;
justify-content: center;
}
3. از عنصر Deprecated center استفاده کنید
بهترین روش‌های وب شما را تشویق می‌کنند که از CSS برای استایل‌سازی و از HTML برای معناشناسی استفاده کنید، بنابراین نباید از این روش HTML استفاده کنید. تگ مرکزی که محتویات آن را به صورت افقی متمرکز می کند، در HTML5 منسوخ شده است.
اما اگر مجبور هستید، در اینجا نحوه قرار دادن یک تصویر به تنهایی با استفاده از HTML آمده است. به سادگی تگ img را در یک تگ مرکزی مانند زیر بپیچید:
<center>
<img src="xyz.jpg">
</center>
این نحوه تراز کردن تصاویر خود در HTML است
ما سه روش مختلف و آسان برای قرار دادن تصاویر خود در یک سند HTML را به شما نشان داده ایم. همه آنها را امتحان کنید و بهترین را برای شما انتخاب کنید. از روش سوم خودداری کنید مگر اینکه مطلقاً هیچ انتخابی نداشته باشید!
نکته ای که باید به خاطر داشته باشید این است که چندین روش دیگر برای وسط تصاویر با استفاده از HTML و CSS وجود دارد. یکی از روش های متداول که برای تصاویر متنی و درون خطی کار می کند، ویژگی text-align است.