Разполагането на елементи на уеб страница е от съществено значение за цялостния дизайн. Въпреки че има други начини да се повлияе на оформлението, като например използването на таблици ( които не препоръчваме ), най -добре е да използвате CSS .
По-долу ще разгледаме как да използвате обикновена собственост в стил CSS, за да подравните изображения, таблици, абзаци и др.
Забележка: Същите тези методи могат да се използват и на външни стилови листа, но тъй като те се отнасят за отделни артикули и е вероятно да останат по този начин, най-добре е да използвате оформянето в стил като това, споменато по-долу.
Подравняване на текстовите абзаци
Маркировката за параграф е първото място, в което да започнете да излагате своята уеб страница. Това отваряне и затваряне на таговете изглежда така:
По подразбиране подравняването на текста в даден параграф е в лявата част на страницата, но можете също така да приведете параграфите си вдясно и в центъра.
Използването на свойството на флоута ви позволява да подравнявате параграфи отдясно или отляво на родителския елемент. Всички останали елементи в този родителски елемент ще преминат около плаващия елемент.
За да постигнете най-добър ефект с параграф, най-добре е да зададете ширина на параграфа, която е по-малка от елемента на контейнера (родител).
Подравнете текста в рамките на абзаците
Разбира се, най-интересното приравняване за текста на параграфа е "justify", което показва на браузъра, че текстът е подравнен по същество както с дясната, така и с лявата страна на прозореца.
За да оправдаете текста в абзац, бихте използвали свойството text-align.
Можете също така да подравните целия текст в даден параграф отдясно или наляво (по подразбиране), като използвате свойството text-align.
Характеристиката "текст-подравняване" ще приведе текста в елемента. Технически не е необходимо да се подравняват изображения, които се съдържат в параграфа или друг елемент, но повечето браузъри третират изображенията като вградени в тази собственост.
Подравняване на изображения
С помощта на собствеността на флота върху маркера на изображението можете да определите разположението на изображенията в страницата и начина, по който текстът ще се обвие около тях.
Точно както параграфите по-горе, собствеността на стил "флоут" в маркера на изображението ще позиционира изображението ви на страницата и ще разкаже на браузъра как да поток текст и други елементи около това изображение.
Текстът, следващ горния маркер за изображения, ще се разпростира около изображението надясно, докато изображението се показва отляво на екрана.
Ако искам текстът да спре да обгръща изображението, използвам ясната собственост:
Подравняване на повече от параграфите
Какво обаче, ако искате да приведете нещо повече от само един абзац или изображение? Можете просто да поставите стил собственост във всеки параграф, но има етикет, който можете да използвате, което е по-ефективно:
Просто заобикаляйте текста и изображенията (включително HTML таговете ) с маркера и собствеността на стила (float или text-align) и всичко в това разделение ще бъде подравнено както искате.
Имайте предвид, че приравняването, добавено към параграфите или изображенията в рамките на разделянето, ще бъде удовлетворено, като надвишава маркера.