Веб-дизайнерам та розробникам часто доводиться стикатися із завданням вирівнювання тексту праворуч від картинки на веб-сторінці. Таке компонування може бути корисним при створенні блогів, портфоліо або сайтів новин. Стандартний спосіб вирівнювання блоку з текстом праворуч від картинки – використання властивості CSS float. Однак, існують й інші підходи, які дозволяють досягти такого самого результату.
Одним із способів вирівнювання тексту праворуч від картинки є використання властивості CSS float. Ми можемо задати значення float:right; для блоку з картинкою та блок із текстом буде автоматично вирівняний праворуч від неї. Цей спосіб простий та швидкий, однак, може викликати проблеми при використанні вкладених елементів, оскільки блоки можуть наїжджати один на одного та порушувати загальну композицію сторінки.
Інший спосіб досягти вирівнювання тексту праворуч від картинки – використання властивості CSS display:flex;. При заданні значення display:flex; батьківський блок із картинкою та блок із текстом стають flex-контейнерами, і ми можемо вказати, що дочірній блок із текстом має бути вирівняний праворуч за допомогою властивості margin-left: auto;. Цей спосіб більш гнучкий і дозволяє керувати розташуванням блоків усередині контейнера, проте вимагає більш складного CSS-коду.
Метод | Опис |
---|---|
float | Властивість float дозволяє вирівнювати блоки щодо один одного. Якщо застосувати властивість float зі значенням left або right до картинки, текст буде обтікати картинку. |
position | Властивість position із значенням absolute дозволяє задати точне положення елемента щодо інших елементів на сторінці. Можна встановити положення картинки, а потім за допомогою властивості margin-left задати відступ тексту від картинки. |
display | Властивість display зі значенням inline-block дозволяє перетворити блоковий елемент на рядковий та обертає його вміст. Таким чином, можна задати ширину і висоту картинки, а потім за допомогою margin-left властивості задати відступ тексту від картинки. |
Як зробити текст праворуч від зображення CSS?
Щоб задати вирівнювання з правого краю для селектора IMG слід встановити стильову властивість float зі значенням right. Не всі малюнки на сторінці слід вирівнювати вказаним чином, тому краще ввести спеціальний клас, назвемо його rightpic, і додаватимемо його тільки до потрібних зображень.
Як зробити картинку зліва а текст праворуч CSS?
Значення left, навпаки, вирівнює зображення по лівому краю, а текст праворуч від малюнка. У цьому прикладі до тега <img> додається клас fig, для якого встановлено вирівнювання по правому краю і, відповідно, обтікання картинки зліва.
Як поставити картинку праворуч у CSS?
Як вирівняти картинку з правого краю в css
- Для вирівнювання зображення праворуч використовується властивість "float:right". …
- Коли малюнок змістилася, то текст та інші елементи починають її обтікати впритул і у багатьох випадках це виглядає некрасиво, тому додають відступи за допомогою властивості "margin y1 x1 y2 x2".