Как центрировать картинку на веб-странице с помощью HTML
- Использование атрибута стиля
- Пример HTML-кода
- Пример центра изображения с использованием приведенного выше кода
- Преобразование в элемент уровня блока
- Пример HTML-кода
- Пример центрированного кода изображения
- Использование тегов <center>
- Пример HTML-кода
Обновлено: 13.11.2008 от Computer Hope
Хотя это не обязательно сложно, центрирование изображений на вашем интернет страницы может быть более вовлеченным, чем вы думаете. Основная причина в том, что <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>