Як центрувати зображення в html (з ілюстраціями)

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

кроки

Метод 1 з 2:

CSS (рекомендується)

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

  src = "dog.jpg "alt =" це картинка собаки "class =" center ">

замість dog.jpg підставте назву файлу картинки, а після «alt» введіть опис зображення. значення center для «class» не міняйте, бо ви створите CSS-клас з цим ім`ям.

2. Знайдіть CSS-код. Якщо на сайті є окремий CSS-файл, відкрийте його. Якщо немає, CSS-код, швидше за все, знаходиться у верхній частині HTML-файлу всередині тегів . Прокрутіть до верхньої частини файлу, щоб знайти теги .

якщо тегів немає, додайте їх. прочитайте цю статтю, щоб отримати додаткову інформацію.

3. Додайте в CSS код для вирівнювання картинки. Замість «50%» можна ввести інше значення, щоб зображення з`явилося на сторінці. Відцентрувати зображення зі значенням «100%» не вийде, тому це число повинне бути іншим.

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

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

Також всередині тегів можна додати class = "center", щоб отцетріровать інші зображення.

Метод 2 з 2:

Атрибут «align» в HTML

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

2. Додайте HTML-код для зображення. Введіть наступний код після тега . Використовуйте цей приклад в якості керівництва:


 src = "dog.jpg "alt =" картинка "align =" middle ">

замість dog.jpg підставте назву файлу картинки, а після «alt» введіть опис зображення.

Атрибут «middle» повідомляє браузеру, що картинку потрібно відобразити в центрі сторінки.

3. Закрийте тег абзацу. Для цього додайте після тега картинки. Готовий код повинен виглядати приблизно так:


 src = "dog.jpg "alt =" картинка "align =" middle ">

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