Как центрировать картинку на веб-странице с помощью HTML

  1. Использование атрибута стиля
  2. Пример HTML-кода
  3. Пример центра изображения с использованием приведенного выше кода
  4. Преобразование в элемент уровня блока
  5. Пример HTML-кода
  6. Пример центрированного кода изображения
  7. Использование тегов <center>
  8. Пример HTML-кода

Обновлено: 13.11.2008 от Computer Hope Обновлено: 13

Хотя это не обязательно сложно, центрирование изображений на вашем интернет страницы может быть более вовлеченным, чем вы думаете. Основная причина в том, что <img> тег является встроенным элементом, поэтому он ведет себя не так, как элементы уровня блока. Некоторые подходы используют HTML; другие используют CSS, и некоторые считаются более "правильными", чем другие, поскольку они не являются устаревшими. Чтобы продолжить, выберите метод из списка ниже и следуйте инструкциям.

Использование атрибута стиля

Для поддержки в HTML5 , вы должны использовать стиль атрибут со значением text-align: центр внутри элемента уровня блока; такие как теги <p> </ p> .

Пример HTML-кода

<p style = "text-align: center;"> <img src = "logo.gif" alt = "Logo"> </ p> Совет

Добавление в соответствии стиль, как показано выше, в идеале должен выполняться только один раз в документе. Если вам нужно центрировать несколько изображений, вам следует воспользоваться предложением ниже и создать класс CSS, который поможет сократить избыточный код и ускорить работу вашей веб-страницы.

Пример центра изображения с использованием приведенного выше кода

Пример центра изображения с использованием приведенного выше кода

Преобразование в элемент уровня блока

Один из способов правильного центрирования изображений - определить элемент <img> как элемент уровня блока. Для этого добавьте правило в голова вашей страницы (показано в следующем примере), или связанный внешний CSS файл.

Пример HTML-кода

<style type = "text / css"> .centerImage {text-align: center; Дисплей: блок; } </ style>

С помощью этого кода вы можете применить centerImage учебный класс в тег <img> без необходимости вкладывать его в элемент уровня блока. Этот метод работает для нескольких изображений.

Пример центрированного кода изображения

<img src = "logo.gif" class = "centerImage" alt = "CH Logo" height = "120" width = "350">

Использование тегов <center>

Вы можете центрировать изображение, заключив тег <img> в теги <center> </ center> . Это действие центрирует эту и только эту картинку на веб-странице. Следует отметить, что этот метод осуждается в HTML5 и не всегда будет работать во всех браузеры идти вперед. Мы рекомендуем использовать этот метод только в том случае, если ни одно из упомянутых выше предложений не работает там, где вы пытаетесь отцентрировать изображение.

Пример HTML-кода

<center> <img src = "logo.jpg" alt = "какое изображение показывает" height = "150" width = "200"> </ center>