محتوا

• مراحل
• روش 1 از 2: CSS (توصیه می شود)
• روش 2 از 2: ویژگی "align" در HTML

صفت تراز کردن برچسب زدن html> از HTML5 منسوخ شده است در حالی که این ویژگی هنوز در اکثر مرورگرهای وب کار می کند ، توصیه می شود که تصاویر را با استفاده از Cascading Style Sheets (CSS) تراز کنید. در این مقاله ، ما قصد داریم نحوه متمرکز کردن تصاویر با استفاده از CSS و تگ منسوخ شده را به شما نشان دهیم. تراز کردن.

مراحل

روش 1 از 2: CSS (توصیه می شود)

1. 1 کد HTML را برای تصویر اضافه کنید. از صفحات آبشاری (CSS) برای تراز کردن تصویر استفاده خواهید کرد ، اما باید آن را با استفاده از HTML در صفحه قرار دهید. در زیر نمونه ای از استفاده از برچسب آورده شده است img> برای قرار دادن تصویر در کد خود:

   img src = "dog.webp" alt = "این عکس یک سگ است">

   • بجای dog.webp نام فایل تصویر را جایگزین کنید ، و پس از "alt" توضیحات تصویر را وارد کنید. معنی مرکز برای "کلاس" تغییر نکنید ، زیرا یک کلاس CSS با آن نام ایجاد می کنید.
2. 2 کد CSS را پیدا کنید. اگر سایت شما دارای فایل CSS جداگانه است ، آن را باز کنید. در غیر این صورت ، CSS به احتمال زیاد در بالای فایل HTML ، در داخل برچسب ها قرار دارد سر>... برای یافتن برچسب ها به بالای فایل بروید style> / style>.
   • اگر برچسب ها style> / style> نه ، آنها را اضافه کنید برای اطلاعات بیشتر این مقاله را بخوانید.
3. 3 CSS را برای تراز کردن تصویر اضافه کنید. به جای "50" "، می توانید مقدار متفاوتی را وارد کنید تا تصویر در صفحه ظاهر شود. شما نمی توانید تصویر را با مقدار "100٪" در مرکز قرار دهید ، بنابراین این عدد باید متفاوت باشد.

   .center {display: block؛ margin-left: auto؛ margin-right: auto؛ عرض: 50٪؛ }

4. 4 تغییرات خود را ذخیره کنید. فایل HTML و فایل CSS (در صورت وجود) را ذخیره کنید. با این کار تصویر مرکز می شود.
   • همچنین داخل برچسب ها img> میتوان افزود برای قرار دادن سایر تصاویر در مرکز

روش 2 از 2: ویژگی "align" در HTML

1. 1 ایجاد یک پاراگراف جدید اگرچه این روش برای متمرکز کردن تصاویر منسوخ شده است ، اما هنوز در بسیاری از مرورگرها کار می کند. با این حال ، توصیه می کنیم از CSS برای حفظ عملکرد سایت هنگامی که مرورگرها از ویژگی مشخص شده پشتیبانی نمی کنند ، استفاده کنید. به یاد داشته باشید که ویژگی تراز کردن تصویر را فقط در داخل عنصری که آن را احاطه کرده است متمرکز می کند (برای مثال ، داخل برچسب ها p> / p> یا div> / div>) به عنوان مثال ، در فایل HTML ، با افزودن یک پاراگراف جدید ایجاد می کنیم p> روی خط جداگانه
2. 2 کد HTML را برای تصویر اضافه کنید. کد زیر را بعد از برچسب وارد کنید p>... از این مثال به عنوان راهنما استفاده کنید:

   p> img src = "dog.webp" alt = "picture" align = "middle">

   • بجای dog.webp نام فایل تصویر را جایگزین کنید و بعد از "alt" توضیحات تصویر را وارد کنید.
   • ویژگی میانی به مرورگر می گوید که تصویر را در مرکز صفحه نمایش دهد.
3. 3 تگ پاراگراف را ببندید. برای انجام این کار ، اضافه کنید / p> بعد از برچسب تصویر کد تمام شده باید چیزی شبیه به این باشد:

   p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

4. 4 تغییرات خود را ذخیره کنید. با این کار تصویر مرکز می شود.