Центрирајте ги сликите, текстот и блок елементите при градење на веб-страници
Ако учат како да изградат веб-страници , еден од најчестите трикови што ќе треба да го совладате е како да ги центрирате становите во прозорецот на прелистувачот. Ова може да значи центрирање на слика на страната, или може да биде центар-оправдувачки текст како наслови како дел од дизајнот.
Правилниот начин да се постигне овој визуелен изглед на центрирани слики или текст или дури целата своја веб-страница е со користење на Cascading Style Sheets (CSS) . Повеќето својства за центрирање се во CSS од верзијата 1.0, и тие работат одлично со CSS3 и современи веб прелистувачи .
Како и многу аспекти на веб дизајн, постојат повеќе начини да се користи CSS за центрирање на елементи во веб-страница. Ајде да погледнеме на неколку различни начини да го користите CSS за да го постигнете овој визуелен изглед.
За преглед на користењето на CSS до елементите на центарот во HTML
Центрирањето со CSS може да биде предизвик за започнување на веб-дизајнери бидејќи има толку многу различни начини за остварување на овој визуелен стил. Додека различни методи може да бидат убави или искусни веб развивачи кои знаат дека не сите техники работат на секој елемент, ова може да биде ужасно предизвик за поновите веб професионалци, бидејќи широк спектар на методи значи дека тие треба да знаат кога да користат кој пристап. Најдоброто нешто што треба да направите е да стекнете разбирање за неколку пристапи. Откако ќе почнете да ги користите, ќе дознаете кој метод најдобро функционира во кои случаи.
На високо ниво, можете да користите CSS на:
- Текст на центарот
- Центрирајте елемент на блок-ниво (како поделба)
- Центрирајте слика
- Вертикално центрирајте блок или слика
Пред многу (многу) години веб дизајнерите можеа да го користат елементот
Центрирање текст со CSS
Најлесно да се центрира на веб-страница е текстот. Има само еден стил на имот што треба да го знаете за да го направите ова: порамнување на текст. Земете го стилот CSS подолу, на пример:
p.center {текст-порамнување: центар; }
Со оваа линија на CSS, секој параграф напишан со централната класа би бил центриран хоризонтално во рамките на неговиот родителски елемент. На пример, ако ставот беше во поделба, што значи дека е дете на таа поделба, тоа би било центрирано хоризонтално во рамките на
Еве еден пример на оваа класа применета во HTML-документот:
Овој текст е центриран.
Кога центрирате текст со својството за прилагодување на текстот, запомнете дека тоа ќе биде центрирано во рамките на неговиот елемент што содржи и не мора да е во центарот на целата страница. Исто така запомнете дека центарот-оправданиот текст може да биде тешко да се прочита за големи блокови на содржини, па затоа користете го овој стил повремено. Насловите и малите блокови на текст, како текст на напис за статија или друга содржина, често се читаат лесно и во ред кога се центрирани, но поголемите блокови на текст, како и самиот целосен напис, би биле предизвикувачки за консумирање доколку содржината е целосно центар оправдано. Запомнете, читливоста е секогаш клучна кога станува збор за текстот на веб страната!
Центрирање блокови со содржина со CSS
Блоки се било елементи на вашата страница, кои имаат дефинирана ширина и се воспоставени како елемент на ниво на блок. Честопати, овие блокови се создаваат со користење на елементот HTML
div.center {
маргина: 0 авто;
ширина: 80em;
}
Оваа кратенка на CSS за имотот на маргината ќе ги постави горните и долните маргини на вредност од 0, додека левата и десната ќе користат "auto". Ова во суштина зазема простор кој е достапен и поделен е подеднакво помеѓу двете страни на прозорецот за визуелен преглед, ефективно центрирање на елементот на страницата.
Тука се применува во HTML:
но текстот во него е лево подреден.
Додека вашиот блок има дефинирана широчина, тој ќе се среди во внатрешноста на содржината. Текстот содржан во тој блок нема да биде центриран во него, но ќе биде оправдан. Ова е затоа што текстот е лево-оправдан во стандардниот во веб прелистувачите. Доколку сакате текстот да биде центриран исто така, можете да го искористите текстот за усогласување на имотот што го поминавме порано во врска со овој метод за да го центризираме поделбата.
Центрирање на слики со CSS
Додека повеќето прелистувачи ќе прикажуваат слики фокусирани со истиот објект за усогласување на текстот што веќе го разгледавме за пасусот, не е добра идеја да се потпреме на таа техника, бидејќи не е препорачана од W3C . Бидејќи не е препорачливо, секогаш постои можност дека идните верзии на прелистувачи би можеле да изберат да го игнорираат овој метод.
Наместо да го коригирате текстот за центрирање на сликата, треба експлицитно да му кажете на прелистувачот дека сликата е елемент на ниво на блок. На овој начин, можете да го центрирате како и секој друг блок. Тука е CSS за да се случи ова:
img.center {
дисплеј: блок;
маргина-лево: авто;
маргина-десна: авто;
}
И тука е HTML кој за сликата што би сакале да биде центрирана:
Можете исто така да ги центрирате објектите со користење CSS во линија (видете подолу), но овој пристап не е препорачлив бидејќи додава визуелни стилови во HTML-ознаката. Запомнете, ние сакаме да го одделиме стилот и структурата, па додавајќи стилови на CSS во вашиот HTML код со прекин на таа поделба и, како таква, треба да се избегнува секогаш кога е можно.
Центрирање на елементите вертикално со CSS
Центрирањето на објектите вертикално отсекогаш било предизвик во веб-дизајнот, но со објавувањето на CSS модулот за флексибилна кутија во CSS3, сега постои начин да се направи тоа.
Вертикалното усогласување работи слично на хоризонталното усогласување покриено погоре. Имотот на CSS е вертикално усогласен со средната вредност.
.vcenter {
вертикално-усогласување: средно;
}
Недостатоци на овој пристап е тоа што не сите прелистувачи го поддржуваат CSS FlexBox, иако се повеќе и повеќе се приближуваат кон овој нов CSS распоред метод! Всушност, сите современи прелистувачи денес го поддржуваат овој стил на CSS. Ова значи дека вашата единствена грижа со Flexbox ќе биде многу постара верзија на прелистувачот.
Ако имате проблеми со постари прелистувачи, W3C препорачува да го центрирате текстот вертикално во контејнер користејќи го следниов метод:
- Поставете ги елементите да бидат центрирани во елементот што содржи, како што е div.
- Поставете минимална висина на елементот што содржи.
- Изјавувам дека содржи елемент како клеточна табела.
- Поставете го вертикалното поместување на "средината".
На пример, тука е CSS:
.vcenter {
мин-висина: 12em;
дисплеј: маса-ќелија;
вертикално-усогласување: средно;
}
И тука е HTML:
Овој текст е вертикално центриран во полето.
Вертикална центрирање и постари верзии на Internet Explorer
Постојат неколку начини за принудување на Internet Explorer (IE), а потоа користете условни коментари, така што само IE ги гледа стиловите, но тие се малку гласни и грди. Добрата вест е дека со неодамнешната одлука на Мајкрософт да ја отфрли поддршката за постарите верзии на IE, овие неподдржани прелистувачи треба да бидат наскоро излезните, што им олеснува на веб-дизајнерите да користат модерни пристапи за распоред како што е CSS FlexBox кој ќе ги направи сите распоред на CSS, не само центрирање, повеќе полесно за сите веб-дизајнери.