Не работает выравнивание картинок в wordpress. Позиционирование изображений.

Всем привет, буквально 5 мин назад обратился заказчик с проблемой: "не получается позиционировать изображение в редакторе WordPress", то есть он ставит картинка должна быть слева - она слева, но не обтекает изображение. Он ставит картинка справа, картинка остается слева 🙂 . Сейчас по быстрому мы разберем эту проблему.

 

Навигация по странице:

 

И так, в редакторе вордпресс у нас есть кнопка "Добавить медиафайл"  add-mediaкликнув на который, мы можем добавить или загрузить изображение на сайт. Далее, мы можем указать, в каком месте страницы мы хотим разместить изображение, например: по центру, слева, справа, без позиционирования.выравнивание картинок в wordpress

Выбрали изображение, указали как позиционировать, но не судьба "не работает выравнивание картинки wordpress" что же делать и в чем может быть причина? - в большинстве случаев такой трабл бывает на своих темах, банально забыли подгрузить стили для позиционирования картинок.

Стили для выравнивания картинок

Стили эти бывают разные, я сюда заброшу те что идет по умолчанию для ВП:

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-container img {
 max-width: 100%;
 height: auto;
}
.alignleft,
img.alignleft {
 display: inline;
 float: left;
 margin-right: 24px;
 margin-top: 4px;
}
.alignright,
img.alignright {
 display: inline;
 float: right;
 margin-left: 24px;
 margin-top: 4px;
}
.aligncenter,
img.aligncenter {
 clear: both;
 display: block;
 margin-left: auto;
 margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
 margin-bottom: 12px;
}
.wp-caption {
 background: #f1f1f1;
 line-height: 18px;
 margin-bottom: 20px;
 padding: 4px;
 text-align: center;
}
.wp-caption img {
 margin: 5px 5px 0;
 max-width: 622px; /* caption width - 10px */
}
.wp-caption p.wp-caption-text {
 color: #777;
 font-size: 12px;
 margin: 5px;
}
.wp-smiley {
 margin: 0;
}

Их нужно скопировать к себе в тему, в файл style.css , в самый конец.

Если все заработало - отлично, если же нет, стоит прочесть пост далее.

Не работает выравнивание картинки wordpress

А далее все может быть немного сложнее, как один из вариантов стили у вас есть но вы их перезатерли другими стилями для картинок или случайно испортили код по умолчанию.

Каждый такой случай на сайте - уникальный, и их все описать я не смогу. Нужно заходить с фиребага или дебагера кода в браузере и смотреть какие стили применились к картинке. Нужно понимать, что изображение позиционируется с помощью стилей float и если его затереть или задать clear или 100% ширины, то позиционирование перестанет работать - выравнивание перестанет функционировать.

Для примера, у моего клиента была записанная вот такая глупость в стилях:

trabl-img

Банально float:none; перекрывало float:right; и выравнивание у картинки по правому краю не работало. Кстати, по левому тоже 🙂 

Вот так вот, аккуратно правьте и изменяйте код стилей сайта, от него зависит многое.

 

Пишите свои вопросы в комментариях или задавайте в форме обратной связи, буду рад на их ответить.

Если у вас трабл на сайте, не забывайте указать действующий URL.

 

Спасибо за внимание, буду благодарный за лайк:

Комментарии к записи «Не работает выравнивание картинок в wordpress. Позиционирование изображений.»:
Сделать заказ
Онлайн помощь по WordPress