• Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Тема: [Responsive design] Вирівняти текст і картинку по центрі

Потрібно вирівняти картинку по центру, а текст по лівому краю відносно картинки. Можна змінювати вміст тільки класів wp-caption, aligncenter, img_aligncenter, img, і першого тегу div вбудований стиль. Нових тегів додавати не можна.

<div id="attachment_529" class="wp-caption aligncenter" style="width: auto;"><img class="img_aligncenter wp-image-529" src=" data:image/png;base64,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" alt="" srcset="" sizes="(max-width: 500px) 100vw, 500px" width="200" height="150"><p class="wp-caption-text">VISA</p></div>
.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.imageMarginClass img, .post img {
    padding-right: 5px;
    padding-left: 5px;
}
.img_aligncenter {
    clear: both;
    display: block;
    margin: auto;
}
img {
    display: block;
    margin: auto;
    height: auto;
    max-width: 95%;
    padding: 5px;
}

Якщо зараз подивитися на картинку і текст, можна побачити що картинка адаптивна, але текст не вирівняний відносно лівого краю картинки. Якщо в першому тегу div замінити вбудований стиль на "width: 200px;", текст вирівнюється відносно лівого краю картинки, але картинка стає не адаптивною.

https://jsfiddle.net/8k7mrs4r/3/

Як вирівняти картинку по центрі, а текст по лівому краю відносно картинки, і при тому картинка має бути адаптивна (автоматично зменшуватися) ?

Подякували: 221VOLT1

Betterthanyou вебсайт

2 Відповідь від koala Востаннє редагувалося koala (08.12.2017 22:00:14)

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 617
    • Репутація: 13330

Re: [Responsive design] Вирівняти текст і картинку по центрі

Так само, як і з картинкою:

.aligncenter .wp-caption-text {
  max-width: 200px;
  margin: auto;
  height: auto;
}

https://jsfiddle.net/8k7mrs4r/4/

Подякували: Betterthanyou, 221VOLT, leofun013

koala вебсайт

3 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: [Responsive design] Вирівняти текст і картинку по центрі

оце, майбуть, основна техніка вирівнювання блоків по центру.
Ви встановлюєте ширину блоку, а margin-left та margin-right встановлюєте в auto.

Для елементів з абсолютним позиціюванням можна використовувати наступну техніку
встановлюєте параметр left в 50%, чим ви зробите відступ справа рівним 50% батьківського елементу, що має position встановлене в relative, або в absolute (в іншому разі використовується ширина вікна бравзера), після чого встановлюєте margin-left елементу в (- ширина елементу / 2). І ось цей негативний margin встановлює елемент по центру.

Також не забувайте про існування flexbox. Для центрування елементу за допомогою flexbox, вам потрібно встановити display контейнера, в котрому знаходиться елемент, в flex. Після чого, також, для контейнера, встановлюєте align-items в center, готово.

Подякували: Betterthanyou, 221VOLT, Monolith, leofun014