.

Атрибут align досить універсальний і може застосовуватися не тільки до основного тексту, а й до заголовків на кшталт

. У прикладі 1 показано, як у такому разі встановлювати вирівнювання.

Приклад 1. Вирівнювання тексту

Як упіймати лева?

Метод перебору

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

Метод дихотомії

Ділимо пустелю на дві половини. В одній частині – лев, в іншій його немає. Беремо ту половину, в якій знаходиться лев, і знову ділимо її навпіл. Так повторюємо доти, доки лев не виявиться спійманий.

Результат прикладу показано на рис. 1.

Рис. 1. Вирівнювання тексту з правого та лівого краю

У цьому прикладі вирівнювання заголовка відбувається по центру вікна браузера, виділеного абзацу з правого краю, а основного тексту - з лівого краю.

У цій статті розглянемо як вирівняти картинку з правого та лівого краю засобами css на сайті.

Як вирівняти картинку з правого краю в css

Для вирівнювання зображення з правого краю використовується властивість "float:right". Властивість float змінює вигляд відображення картинки (або іншого елемента) на блоковий, але з особливостями: вона стає невидимою для інших блокових елементів, але при цьому зберігає видимість для малих (display: inline), які її обтікають.

Ця особливість дозволяє вирівняти зображення з правого та лівого краю в CSS, а також інші елементи по краю без використання таблиць і великої кількості зайвого коду. Детальну інформацію як працює ця властивість можна знайти в пошукових системах на запит "float css".

Коли картинка змістилася, текст і інші елементи починають її обтікати впритул і в багатьох випадках це виглядає некрасиво, тому додають відступи за допомогою властивості "margin y1 x1 y2 x2". Значення "y1 x1 y2 x2" це відступи зверху, праворуч, знизу і зліва відповідно.

Некоректне відображення плаваючих float елементів

Як писалося вище, плаваючі елементи float не враховуються, тому що є невидимими для блокових тегів, тому можливе некоректне відображення:

1 випадок:елемент float виходить за межі батьківського шару.

2 випадок:Заголовок та інший вміст у блоковому елементі відображається не з нового рядка, а починає обтікати вищезгаданий з типом float .

Як виправити некоректне відображення плаваючих float елементів

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

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

Як розширювач кордону можна використовувати будь-який блоковий тег із зазначенням clear.

Властивість clear може приймати значення:

• none- дозволити обтікання;
• left- заборона обтікання з лівого боку;
• right- заборона обтікання з правого боку;
• both- заборона обтікання з обох боків.

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

без внутрішнього змісту.

Вирівнювання зображення по лівому краю в CSS

Вирівняти зображення з лівого краю в css, так само як і з правого, тільки замість float: right , пишеться float: left , а замість відступу від лівого краю встановлюється відступ від правого за допомогою margin.

Приклади

Приклад html коду вирівнювання картинки з правого краю в css (clear не потрібен)

Результат у браузері

Код сторінки (властивість clear не потрібна)

У прикладі вище зображення притискається до правого краю і має відступ ліворуч 15 px.

Приклад html коду як вирівняти картинку з правого краю в CSS (clear необхідний для розширення кордону)

Результат у браузері

У прикладі вище властивість "border:4px solid #cccccc;" означає зробити рамку завтовшки 4px і кольором #cccccc, а padding:10px це внутрішній відступ div тега на 10px.

Приклад html коду як вирівняти картинку по лівому краю в CSS (clear необхідний для розширення кордону)

Результат у браузері

Код сторінки (з властивістю clear)

Птахи

Риби

Тут можна розмістити текст.

У прикладі вище зображення притискається до лівого краю і має відступ зверху та праворуч 15 px.

До певного часу я, як і багато хто з вас, користувався двома способами:

1. Перший спосіб ґрунтується на властивості float. Лівому блоку задається float: left, правому float: right
2. Другий спосіб полягає в абсолютному позиціонуванні правого блоку з параметрами right: 0 або left: 100%, margin-left: -(ширина блоку)

Головний недолік обох способів полягає в тому, що якщо блоки потрібно вирівняти по нижній межі або по середній лінії відносно один одного, то доводиться методом підбору зміщувати блоки по вертикалі, задаючи їм або top: anyValue, або margin-top: anyValue. А перший спосіб плюс до всього є ще один, не те щоб недолік, але неприємна дрібниця. Це необхідність очищати потік за допомогою clearFix"a, overflow або додаткового дива.
Отже спосіб номер 3. Для початку код:

Власне HTML

Copy Source | Copy HTML

1. < div class ="wrap">
2. < div class ="left">< a href ="#">Лівий блок< div class ="right">< a href ="#">Правий блок

Власне CSS

Copy Source | Copy HTML

1. .wrap (
2. width: 500px;
3. background: #555;
4. height: 500px;
5. .left, .right (
6. display: inline-block;
7. //display: inline;
8. // zoom: 1;
9. width: 100%;
10. margin-right: -100%;
11. vertical-align: bottom;
12. .right (
13. text-align: right;
14. .left a , .right a ( display : inline -block ; position : relative ; )
15. .left a ( width : 200px ; height : 100px ; background : green ; )
16. .right a ( width : 100px ; height : 200px ; background : pink ; )

Пояснення

Суть способу полягає в тому, щоб накласти блоки один на одного за допомогою margin-right: -100% і вміст правого блоку вирівняти праворуч за допомогою text-align: right.
Обидва блоки (right і left) бажано записувати в один рядок, інакше через символ перенесення рядка правий блок трохи вилазитиме за межі блоку-батька.
Посиланням обов'язково потрібно ставити position: relative, інакше через накладання блоків деякі можуть бути неклікабельні.

Плюси способу

Головний плюс у тому, що тепер для наших блоків починає працювати vertical-align. І ми легко можемо вирівняти їх і по верхній межі, і по нижній, і по центру.

Мінуси способу

А головний мінус полягає в тому, що, застосовуючи цей спосіб, ми повинні бути твердо впевнені, що вміст блоків не збільшиться настільки, що вони почнуть перекривати один одного (до речі, спосіб з флоутами позбавлений цього недоліку, оскільки при збільшенні вмісту блоків, вони будуть вставати один під одного).

P.S.

Я не зустрічав такого способу в інтернеті, тому прохання: якщо хтось знайде аналогічну статтю, опубліковану раніше, повідомте мені будь-ласка.

Upd.

У коментарях мою увагу звернули на спосіб, який використовує text-align: justify. Цей спосіб теж хороший, але має два недоліки. По-перше, він вимагає введення додаткового елемента, емулюючого останній рядок текстового блоку, а по-друге, він не буде працювати в IE6-IE7 для блокових елементів.