Какво да знаете
- За да центрирате текста, използвайте следния код ("[/]" означава прекъсване на ред): .center {[/] text-align: center; [/] }.
- Центрирайте блокове със съдържание със следния код ("[/]" означава прекъсване на ред): .center {[/] поле: автоматично; [/] ширина: 80em; [/] }.
- За да центрирате изображение ("[/]" означава прекъсване на ред): img.center {[/] дисплей: блок; [/] поле вляво: автоматично; [/] поле вдясно: автоматично; [/] }.
CSS е най-добрият начин за центриране на елементи, но може да бъде предизвикателство за начинаещите уеб дизайнери, тъй като има толкова много начини да го постигнат. Тази статия обяснява как да използвате CSS за центриране на текст, текстови блокове и изображения.
Центриране на текст с CSS
Трябва да знаете само едно свойство за стил, за да центрирате текста на страница:
.center {
подравняване на текст: център;
}
С този ред на CSS всеки абзац, написан с клас .center, ще бъде центриран хоризонтално вътре в своя родителски елемент. Например, абзац вътре в разделение (дъщеря на това разделение) ще бъде центриран хоризонтално вътре в.
Ето пример за този клас, приложен в HTML документа:
Този текст е центриран.
Когато центрирате текст със свойството text-align, не забравяйте, че той ще бъде центриран в съдържащия го елемент и не е задължително центриран в цялата страница.
Четимостта винаги е от ключово значение, когато става въпрос за текста на уебсайта. Голям блокове с текст, оправдан по центъра може да бъде трудно за четене, така че използвайте този стил пестеливо. Заглавията и малки блокове текст, като например тийзър за статия, обикновено са лесни за четене, когато са центрирани; обаче по-големи блокове текст, като пълна статия, би било предизвикателство за консумация, ако е напълно оправдано по център.
Центриране на блокове на съдържание с CSS
Блокове със съдържание се създават с помощта на HTML.
.center {
марж: автоматично;
ширина: 80em;
}
Този CSS стенопис за свойството margin ще зададе горните и долните полета на стойност 0, докато вляво и вдясно ще използва „auto“. Това по същество заема всяко налично пространство и го разделя равномерно между двете страни на прозореца на прозореца, ефективно центрирайки елемента върху страницата.
Тук се прилага в HTML:
Целият този блок е центриран,но текстът в него е подравнен вляво.
Докато вашият блок има определена ширина, той ще се центрира вътре в съдържащия елемент. Текстът, съдържащ се в този блок, няма да бъде центриран в него, но ще бъде подравнен вляво. Това е така, защото текстът е подравнен вляво като стандарт по подразбиране в уеб браузърите. Ако искате и текстът да е центриран, можете да използвате свойството text-align, обхванато по-рано заедно с този метод, за да центрирате разделянето.
Центриране на изображения с CSS
Въпреки че повечето браузъри ще показват изображения, центрирани с помощта на едно и също свойство за подравняване на текст, не се препоръчва от W3C. Следователно винаги има шанс бъдещите версии на браузърите да изберат да игнорират този метод.
Вместо да използвате подравняване на текст за центриране на изображение, трябва изрично да кажете на браузъра, че изображението е елемент на ниво блок. По този начин можете да го центрирате както всеки друг блок. Ето CSS, за да се случи това:
img.center {
дисплей: блок;
поле вляво: автоматично;
поле вдясно: автоматично;
}
И ето HTML за изображението, което трябва да бъде центрирано:
Можете също така да центрирате обекти, като използвате вграден CSS (вижте по-долу), но този подход не се препоръчва, защото добавя визуални стилове към вашата HTML маркировка. Не забравяйте, че стилът и структурата трябва да са отделни; добавянето на CSS стилове към HTML ще наруши това разделяне и като такова трябва да го избягвате, когато е възможно.
Центриране на елементи вертикално с CSS
Центрирането на обекти вертикално винаги е било предизвикателство в уеб дизайна, но пускането на CSS модул за гъвкаво оформление на кутията в CSS3 предоставя начин да го направите.
Вертикалното подравняване работи подобно на хоризонталното подравняване, описано по-горе. Свойството CSS е вертикално подравнено, така:
.vcenter {
вертикално подравняване: средна;
}
Всички съвременни браузъри поддържат този CSS стил. Ако имате проблеми с по-стари браузъри, W3C препоръчва да центрирате текста вертикално в контейнер. За целта поставете елементите вътре в съдържащ елемент, като например div, и задайте минимална височина върху него. Декларирайте съдържащия елемент като клетка на таблица и задайте вертикалното подравняване на "средна".
Например, тук е CSS:
.vcenter {
мин-височина: 12em;
дисплей: таблица-клетка;
вертикално подравняване: средна;
}
И тук е HTML:
Този текст е вертикално центриран в полето.
Не използвайте HTML елемента за центриране на изображения и текст; той е остарял и съвременните уеб браузъри вече не го поддържат. Това до голяма степен е отговор на ясното разделяне на структурата и стила на HTML5: HTML създава структура, а CSS диктува стил. Тъй като центрирането е визуална характеристика на даден елемент (как изглежда, а не какъв е), този стил се обработва с CSS, а не с HTML. Вместо това използвайте CSS, така че страниците ви да се показват правилно и да отговарят на съвременните стандарти.
Вертикално центриране и по-стари версии на Internet Explorer
Можете да принудите Internet Explorer (IE) да центрира и след това да използвате условни коментари, така че само IE да вижда стиловете, но те са малко многословни и непривлекателни. Решението на Microsoft от 2015 г. да откаже подкрепата за по-стари версии на IEобаче ще направи това не-проблем, тъй като IE излиза от употреба.