Вирівнювання по правому краю, css - приклади

Як вирівняти картинку по правому краю

по умолчаніюtext-alignmargin-leftfloatpositiondisplay

Довгий абзац з кількома реченнями. Він містить текст, що характеризує позначене прапорцем властивість, і зображення, яке потрібно притиснути до краю правого боку.

Властивість text-align успадковується, застосовується до блокових елементів.
Вирівнює все що містяться в них малі елементи і текст по горизонталі. Воно не переміщує сам елемент і не пересуває блоки, не працює, якщо задано строчному елементу. У нього є кілька значень, в тому числі right. дозволяють зрушувати вміст вправо.

Властивість margin-left не успадковується, застосовується до всіх елементів. У нього є значення auto. яке вирівнює блоковий елемент по горизонталі. А саме margin-left: auto; притискає елемент до правого краю батька. Це положення може змінюватися властивістю margin-right. При margin-left: auto; і margin-right: auto; елемент розміщується по центру ширини предка.

Властивість float не успадковується, застосовується до всіх елементів. Воно виймає елемент з потоку і притискає до краю лівого або правого боку батька. Елементи і текст, розташовані в коді після float-елемента, обтікають його з протилежного боку.

Властивість position не успадковується, застосовується до всіх елементів. position: absolute; виймає елемент з потоку і має в своєму розпорядженні поверх решти вмісту. Його можна переміщати щодо кордонів батька, у якого значення position відмінно від static. за допомогою властивостей top. right. bottom. left. При direction: ltr; властивість left має пріоритет над властивістю right. крім випадків, коли властивість left має значення auto.

Властивість display не успадковується, застосовується до всіх елементів. Елемент зі значенням table подібний тегу table. а table-cell - td. Також варто звернути увагу на значення flex.

Порада: на даному прикладі цікаво подивитися як поводиться картинка, коли зменшується розмір вікна браузера.

Як вирівняти текст по правому краю

Короткий текст праворуч