Зміст

• кроки
• Метод 1 з 2: CSS (рекомендується)
• Метод 2 з 2: Атрибут «align» в HTML

Атрибут align тега html> вважається застарілим з появою HTML5. Хоча цей атрибут, як і раніше працює в більшості веб-браузерів, рекомендується вирівнювати зображення за допомогою каскадних таблиць стилів (CSS). У цій статті ми розповімо вам, як центрировать зображення за допомогою CSS і застарілого тега align.

кроки

Метод 1 з 2: CSS (рекомендується)

1. 1 Додайте HTML-код для зображення. Для вирівнювання картинки ви скористаєтеся каскадних таблицями стилів (CSS), але розмістити її на сторінці доведеться за допомогою HTML. Нижче наведено приклад використання тега img> для вставки зображення в код:

   img src = "dog.webp" alt = "це картинка собаки">

   • замість dog.webp підставте назву файлу картинки, а після «alt» введіть опис зображення. значення center для «class» не міняйте, бо ви створите CSS-клас з цим ім'ям.
2. 2 Знайдіть CSS-код. Якщо на сайті є окремий CSS-файл, відкрийте його. Якщо немає, CSS-код, швидше за все, знаходиться у верхній частині HTML-файлу всередині тегів head>. Прокрутіть до верхньої частини файлу, щоб знайти теги style> / style>.
   • якщо тегів style> / style> немає, додайте їх. Прочитайте цю статтю, щоб отримати додаткову інформацію.
3. 3 Додайте в CSS код для вирівнювання картинки. Замість «50%» можна ввести інше значення, щоб зображення з'явилося на сторінці. Відцентрувати зображення зі значенням «100%» не вийде, тому це число повинне бути іншим.

   .center {display: block; margin-left: auto; margin-right: auto; width: 50%; }

4. 4 Збережіть внесені зміни. Збережіть HTML-файл і CSS-файл (якщо він є). Так ви отцентріруете зображення.
   • Також всередині тегів img> можна додати , Щоб отцетріровать інші зображення.

Метод 2 з 2: Атрибут «align» в HTML

1. 1 Створіть новий абзац. Хоча даний метод центрування зображень вважається застарілим, він все ще працює в багатьох браузерах. Однак ми рекомендуємо використовувати CSS, щоб сайт функціонував, коли браузери припинять підтримувати вказаний атрибут. Пам'ятайте, що атрибут align відцентруйте картинку тільки всередині елемента, який її оточує (наприклад, всередині тегів p> / p> або div> / div>). Як приклад в HTML-файлі ми створимо новий абзац, додавши p> на окремому рядку.
2. 2 Додайте HTML-код для зображення. Введіть наступний код після тега p>. Використовуйте цей приклад в якості керівництва:

   p> img src = "dog.webp" alt = "картинка" align = "middle">

   • замість dog.webp підставте назву файлу картинки, а після «alt» введіть опис зображення.
   • Атрибут «middle» повідомляє браузеру, що картинку потрібно відобразити в центрі сторінки.
3. 3 Закрийте тег абзацу. Для цього додайте / P> після тега картинки. Готовий код повинен виглядати приблизно так:

   p> img src = "dog.webp" alt = "картинка" align = "middle"> / p>

4. 4 Збережіть внесені зміни. Так ви отцентріруете зображення.