Центрирайте изображения, текст и блокиране на елементи при изграждането на уеб сайтове
Ако се учите как да изграждате уеб сайтове , един от най-често срещаните трикове, които ще трябва да овладеете, е как да центрирате елементи в прозореца на браузъра. Това може да означава центриране на изображение на страницата или може да е център, който оправдава текста като заглавия като част от дизайна.
Правилният начин да постигнете този визуален облик на центрираните изображения или на текста или дори на цялата си уеб страница е чрез използване на каскадни стилови листове (CSS) . Повечето от свойствата за центриране са в CSS от версия 1.0 и работят чудесно с CSS3 и модерни уеб браузъри .
Подобно на много аспекти на уеб дизайна, има няколко начина да използвате CSS за центриране на елементи в уеб страница. Нека да разгледаме някои различни начини да използваме CSS, за да постигнем този визуален външен вид.
Преглед на използването на CSS за центриране на елементи в HTML
Центрирането с CSS може да бъде предизвикателство за начинаещите уеб дизайнери, защото има толкова много различни начини за постигането на този визуален стил. Докато разнообразието от методи може да бъде хубаво или опитни уеб разработчици, които знаят, че не всички техники работят върху всеки елемент, това може да бъде ужасно предизвикателство за по-новите специалисти в мрежата, тъй като голямото разнообразие от методи означава, че трябва да знаят кога да използват кой подход. Най-доброто нещо е да се разбере няколко подхода. Когато започнете да ги използвате, ще научите кой метод работи най-добре в кои случаи.
На високо ниво можете да използвате CSS, за да:
- Център текст
- Центрирайте елемент на ниво блок (като разделяне)
- Центрирайте изображение
- Вертикално центрирайте блок или изображение
Много (преди) години уеб дизайнерите можеха да използват елемента
Центриране на текст с CSS
Най-лесното, което трябва да центрирате в уеб страница, е текстът. Има само един стил, който трябва да знаете, за да направите това: text-align. Вземете CSS стила по-долу, например:
p.center {текст-подравняване: център; }
С този ред CSS всеки параграф, написан с централния клас, ще бъде центриран хоризонтално в основния елемент. Например, ако параграфът е вътре в отделение, което означава, че е дете от това разделение, то ще бъде центрирано хоризонтално в
Ето един пример за този клас, приложен в HTML документа:
Този текст е центриран.
Когато центрирате текста със свойството text-align, не забравяйте, че той ще бъде центриран в неговия съдържащ елемент и не е непременно центриран в самата пълна страница. Също така не забравяйте, че текстът, ориентиран към центъра, може да бъде трудно да се чете за големи блокове със съдържание, така че използвайте този стил пестеливо. Заглавията и малките текстови блокове, като текст за текст за статии или друго съдържание, често са лесни за четене и фини, когато са центрирани, но по-големи текстови блокове, като цялата самата статия, биха били предизвикателни за консумация, ако съдържанието е напълно център обосновано. Не забравяйте, че четливостта винаги е ключова, когато става въпрос за уебсайт текст!
Центриране на блокове със съдържание с CSS
Блокове са всички елементи на вашата страница, които имат определена ширина и са установени като елемент на ниво блок. Често тези блокове се създават с помощта на елемента HTML
div.center {
марж: 0 автоматично;
ширина: 80мм;
}
Тази CSS стенограма за маржин собствеността би определила горната и долната граница на стойност 0, а лявата и дясната ще използват "auto". Това по същество отнема всяко налично място и го разделя равномерно между двете страни на прозореца на прозореца, като ефективно центрира елемента на страницата.
Тук се прилага в HTML:
но текстът вътре в него е вляво подравнен.
Докато блокът ви има определена ширина, той ще се центрира вътре в съдържащия елемент. Текстът, който се съдържа в този блок, няма да бъде центриран в него, но ще бъде оправдан отляво. Това е така, защото текстът е оставен оправдан по подразбиране в уеб браузърите. Ако искате текстът да е центриран, можете да използвате и текстовото подравняване на собственост, което сме включили по-рано във връзка с този метод, за да центрирате разделението.
Центриране на изображения с CSS
Докато повечето браузъри ще покажат изображения, центрирани с помощта на същата текст-align property, вече разгледахме този параграф, не е добра идея да разчитаме на тази техника, тъй като тя не се препоръчва от W3C . Тъй като не се препоръчва, винаги има вероятност бъдещите версии на браузърите да изберат да игнорират този метод.
Вместо да използвате текстово подравняване, за да центрирате изображение, трябва изрично да кажете на браузъра, че изображението е елемент на ниво блок. По този начин можете да го центрирате както всеки друг блок. Ето CSS, за да стане това:
img.center {
дисплей: блок;
маркер-ляво: автоматично;
margin-right: auto;
}
И тук е HTML, че за изображението, че ние бихме искали да бъдат центрирани:
Можете също така да центрирате обекти, като използвате CSS в реално време (вижте по-долу), но този подход не се препоръчва, тъй като добавя визуални стилове в HTML кода си. Не забравяйте, че искаме да отделим стила и структурата, така че добавянето на стилове на CSS към вашия HTML код с прекъсване на разделянето и като такъв трябва да се избягва, когато е възможно.
Центриращи елементи вертикално с CSS
Центрирането на обекти вертикално винаги е било предизвикателство в уеб дизайна, но с пускането на CSS Flexible Box Layout Module в CSS3 вече има начин да го направите.
Вертикалното подравняване работи подобно на хоризонталното изравняване, описано по-горе. CSS собствеността е вертикално съвпадаща със средната стойност.
.vcenter {
вертикално-подравняване: средно;
}
Недостатъкът на този подход е, че не всички браузъри поддържат CSS FlexBox, въпреки че все повече и повече се приближават към този нов CSS оформление метод! Всъщност всички съвременни браузъри днес поддържат този CSS стил. Това означава, че вашите притеснения само с Flexbox ще са много по-стара версия на браузъра.
Ако имате проблеми с по-стари браузъри, W3C препоръчва да центрирате текста вертикално в контейнер, като използвате следния метод:
- Поставете елементите, които трябва да бъдат центрирани вътре в съдържащ елемент, като div.
- Задайте минимална височина върху съдържащия елемент.
- Декларирайте, че съдържа елемент като клетка на таблицата.
- Задайте вертикалното подравняване на "средно".
Например, тук е CSS:
.vcenter {
мин-височина: 12м;
дисплей: маса-клетка;
вертикално-подравняване: средно;
}
И тук е HTML:
Този текст е вертикално центриран в полето.
Вертикално центриране и по-стари версии на Internet Explorer
Има някои начини да принудим Internet Explorer (IE) да центрира и след това да използва условни коментари, така че само IE вижда стиловете, но те са малко подробни и грозни. Добрата новина е, че с неотдавнашното решение на Microsoft да се откаже от подкрепата за по-стари версии на IE, онези безполезни браузъри скоро трябва да излязат навън, което улеснява уеб дизайнерите да използват модерни подредби като CSS FlexBox, които ще направят CSS оформлението, не просто центриране, по-лесно за всички уеб дизайнери.