Css картинку по центру: Как выровнять картинку по центру с помощью CSS

Leave a Comment / Css / By /

Почему мое изображение не центрируется на странице? Как исправить проблемы выравнивания по центру в WordPress с текстом или изображениями.

| Джерод в Советы и хитрости

Недавно ко мне обратились с проблемой на клиентском сайте WordPress и спросили мое мнение о правильном решении. Проблема заключалась в том, что на сайте WordPress этого клиента, если вы встроили изображение в тело текста, это изображение проигнорировало бы любые правила выравнивания, которые вы пытались разместить на нем. Изображение оставалось выровненным по левому краю (на самом деле «не выровненным»), и наша команда ничего не могла с этим поделать через интерфейс WP.

ПРИМЕЧАНИЯ:

  • После прочтения этой статьи некоторые могут возразить, что я использовал термин «правильное исправление» для того, что собираюсь объяснить. Я отсылаю этих прекрасных людей к первому абзацу под изображением.
  • Из соображений конфиденциальности клиента я собираюсь использовать изображения этого на нашем собственном веб-сайте, но эта проблема действительно существовала на клиентском сайте.

 

Я не знаю, почему WordPress не центрирует это изображение. Хотя Netvantage предоставляет SEO-услуги WordPress, мы не занимаемся разработкой веб-сайтов WordPress. Я не настоящий разработчик. Я мастер-на-все-все-все-все-все-все ничего не умею, умею смешивать всякую хрень и часто заставляю ее работать. Иногда это даже хорошо выглядит! Итак, давайте покопаемся. Вот код, указанный в этой статье для этого конкретного изображения:

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

На самом деле, я не знаю, и не стоит тратить время на изучение этого, потому что я могу (вы можете, мы все можем) принудительно установить исправление, которое очень просто и требует всего несколько секунд для реализации. Все, что нам нужно сделать, это добавить:

Все, что вы делаете, это создаете невидимую рамку вокруг встроенного изображения, а затем сообщаете браузеру: «Отцентрируйте все, что я поместил в эту рамку». Вы по-прежнему можете использовать обычные инструменты «встраивания мультимедиа» WordPress для добавления изображений / PDF-файлов, как обычно. Затем просто перейдите к представлению «Текст» в окне редактора WordPress и вставьте этот контейнер DIV, и все готово. (СОВЕТ ДЛЯ ПРОФЕССИОНАЛОВ: если вы выберете изображение, над которым работаете, в «Визуальном» редакторе, то при переходе в «Текстовый» редактор будет выделен определенный фрагмент кода, чтобы его было легче найти.