Цэнтр малюнка, тэкст і блокавыя элементы пры стварэнні вэб-сайтаў
Калі вы навучыцца ствараць вэб - сайты , адзін з найбольш распаўсюджаных прыёмаў , якія неабходна асвоіць як Цэнтраваць элементы ў акне браўзэра. Гэта можа азначаць, цэнтраванне малюнка на старонцы, ці гэта можа быць цэнтральным апраўдваючы тэкст, як загалоўкі, як частка дызайну.
Правільны спосаб зрабіць гэта візуальны выгляд засяроджаных малюнкаў або тэксту ці нават ўсёй вашай вэб - старонкі з дапамогай каскадных табліц стыляў (CSS) . Большасць уласцівасцяў для цэнтроўкі быў у CSS , пачынаючы з версіі 1.0, і яны выдатна працуюць з CSS3 і сучасных вэб - браўзэраў .
Як і многія іншыя аспекты вэб-дызайну, існуе некалькі спосабаў, каб выкарыстоўваць CSS для цэнтравання элементаў на вэб-старонцы. Давайце паглядзім на некаторых розных спосабах выкарыстання CSS для дасягнення гэтага візуальнага выгляду.
На Агляд Выкарыстанне CSS у цэнтры элементаў у HTML
Цэнтраванне з дапамогай CSS можа быць праблемай для пачаткоўцаў вэб-дызайнераў, таму што ёсць вельмі шмат розных спосабаў зрабіць гэта адзін візуальны стыль. У той час як розныя метадаў могуць быць добрымі або прыпраўленым вэб-распрацоўшчыкі, якія ведаюць, што не ўсе метады працуюць на кожным элеменце, гэта можа быць вельмі складаным для новых вэб-прафесіяналаў, так як вялікая разнастайнасць метадаў азначае, што яны павінны ведаць, калі выкарыстоўваць які падыход. Самае лепшае, што трэба зрабіць, гэта атрымаць уяўленне аб некалькіх падыходах. Як толькі вы пачнеце выкарыстоўваць іх, вы даведаецеся, які метад лепш за ўсё працуе, у якіх выпадках.
На высокім узроўні, вы можаце выкарыстоўваць CSS, каб:
- цэнтр тэкст
- Цэнтр на ўзроўні блокаў (напрыклад, элемент падзелу)
- цэнтр малюнка
- Вертыкальна Цэнтраваць блок ці малюнак
Многія (много) гадоў назад, вэб - дызайнеры могуць выкарыстоўваць элемент <цэнтр> Цэнтраваць малюнка і тэкст, але HTML элемент цяпер састарэў і больш не падтрымліваецца ў сучасных вэб - браўзэраў. Гэта азначае, што вы павінны пазбягаць выкарыстання гэтага HTML-элемента, калі вы хочаце, каб вашыя старонкі адлюстроўваліся правільна і адпавядаць сучасным стандартам! Прычына асуджаўся гэты элемент, у значнай ступені, таму што сучасныя вэб-сайты павінны мець выразны падзел структуры і стылю. HTML выкарыстоўваецца для стварэння структуры ў той час як CSS дыктуе стыль. Паколькі цэнтраванне візуальная характарыстыка элемента (як гэта выглядае, а не тое, што гэта такое), што стыль апрацоўваецца з дапамогай CSS, а не HTML. Гэта тэг у HTML структуру , чаму даданне <цэнтр> з'яўляецца памылковым ў адпаведнасці з сучаснымі вэб - стандартамі. Замест гэтага мы звернемся да CSS, каб атрымаць нашы элементы прыгожа і па цэнтры.
Цэнтраванне тэксту з дапамогай CSS
Прасцей за ўсё сфакусаваная на вэб-старонцы тэксту. Існуе толькі адзін тып нерухомасці вы павінны ведаць, каб зрабіць гэта: выраўноўвання тэксту. Вазьміце стыль CSS ніжэй, напрыклад:
p.center {выраўноўвання тэксту: цэнтр; }
З дапамогай гэтай лініі CSS, кожны параграф напісаны з цэнтрам класа будзе гарызантальна па цэнтры ўнутры бацькоўскага элемента. Напрыклад, калі пункт быў ўнутры падраздзялення, гэта значыць ён быў дзіцем гэтага падзелу, было б па цэнтры па гарызанталі ўнутры
Вось прыклад гэтага класа ўжываецца ў HTML-дакуменце:
<Р клас = "Цэнтр"> Гэты тэкст па цэнтру.
Пры цэнтравання тэксту з тэкстам выраўноўваннем уласнасці, памятаеце, што ён будзе засяроджаны ў межах яго элемента і не абавязкова ў цэнтры ў самай поўнай старонцы. Таксама памятайце, што цэнтр з выраўноўваннем тэкст можа быць цяжка чытаць для вялікіх блокаў кантэнту, таму выкарыстоўваюць гэты стыль эканомна. Загалоўкі і невялікія блокі тэксту, як тізер тэксту артыкула або іншага кантэнту, часта лёгка чытаць і добра, калі па цэнтры, але вялікія блокі тэксту, як і сам поўны тэкст артыкула, будзе стымулюючым, каб спажываць, калі змест цалкам цэнтр апраўданы. Памятаеце, што чытальнасць заўсёды ключ , калі справа даходзіць да вэб - сайта тэкст!
Цэнтраванне блокі кантэнту з дапамогай CSS
Блокі якія-небудзь элементы на старонцы, якія маюць пэўную шырыню і ўсталёўваюцца ў якасці элемента ўзроўню блока. Часцяком, гэтыя блокі ствараюцца з дапамогай элемента HTML
div.center {
Маржа: 0 аўто;
шырыня: 80em;
}
Гэты CSS скарочаны для ўласцівасці маржынальнасць б ўсталяваць верхняе і ніжняе поле да значэння 0, а злева і справа будзе выкарыстоўваць «аўто». Гэта па сутнасці займае любую прастору, якое даступна і дзеліць яе пароўну паміж двума бакамі вокны краявідных экранаў, эфектыўна цэнтравання элемента на старонцы.
Тут ён ужываецца ў HTML:
але тэкст ўнутры яго выраўноўваецца па левым краі.
Пакуль ваш блок мае пэўную шырыню, ён будзе Цэнтраваць сябе ўнутры змяшчае элемента. Тэкст, які змяшчаецца ў гэтым блоку не будзе засяроджаны ў ім, але будзе выраўнавана па левым краі. Гэта becaus тэкст выраўноўваецца па левым краі у значэнне па змаўчанні ў вэб-браўзэрах. Калі вы хочаце тэксту па цэнтры, а таксама, вы можаце выкарыстоўваць тэкст выраўноўвання ўласцівасці мы разгледзелі раней у сувязі з гэтым метадам для цэнтравання дзялення.
Цэнтраванне малюнка з дапамогай CSS
У той час як большасць браўзэраў будзе адлюстроўваць выявы , засяроджаныя , выкарыстоўваючы той жа тэкст выраўноўвання ўласцівасці мы ўжо глядзелі на для пункта, гэта не вельмі добрая ідэя , каб спадзявацца на гэтую тэхніку , паколькі ён не рэкамендаваны ў W3C . Так як гэта не рэкамендуецца, заўсёды ёсць шанец, што будучыя версіі браўзэраў маглі выбіраць ігнараваць гэты метад.
Замест выкарыстання выраўноўвання тэксту па цэнтры малюнка, вы павінны відавочна паказаць браўзэру, што малюнак з'яўляецца элементам ўзроўню блока. Такім чынам, вы можаце размясціць яго ў цэнтры, як і любы іншы блок. Вось CSS, каб гэта адбылося:
img.center {
Дысплей: блок;
Маржа налева: аўто;
Маржа направа: аўто;
}
А вось HTML, што для малюнка, якое мы хацелі б быць у цэнтры:
Вы можаце таксама Цэнтраваць аб'екты, выкарыстоўваючы ў лініі CSS (гл ніжэй), але гэты падыход не рэкамендуецца, так як ён дадае візуальныя стылі ў ваш HTML-разметку. Памятаеце, што мы хочам, каб аддзяліць стыль і структуру, таму даданне стыляў CSS для вашага HTML кода з разрывам гэтага падзелу і, такім чынам, варта па магчымасці пазбягаць.
Цэнтраванне элементаў па вертыкалі з дапамогай CSS
Цэнтраванне аб'ектаў па вертыкалі заўсёды быў складаным у вэб-дызайне, але з выпускам CSS Flexible Layout модуля Box у CSS3, зараз ёсць спосаб зрабіць гэта.
Вертыкальнае выраўноўванне працуе аналагічна гарызантальнае выраўноўванне ахоплівае вышэй. Ўласцівасць CSS, з'яўляецца вертыкальным выраўноўваннем з сярэднім значэннем.
.vcenter {
вертыкальна-Align: сярэдні;
}
Недахопам гэтага падыходу з'яўляецца тое, што не ўсе браўзэры падтрымліваюць CSS Flexbox, хоць усё больш і больш прыходзяць вакол гэтага новага метаду макета CSS! На самай справе, усе сучасныя браўзэры сёння цяпер падтрымліваюць гэты CSS стыль. Гэта азначае, што толькі вашы праблемы з Flexbox будуць значна больш старой версіяй браўзэра.
Калі ў вас ёсць праблемы са старымі браўзэрамі, W3C рэкамендуе тэкст у цэнтры вертыкальна ў кантэйнеры, выкарыстоўваючы наступны метад:
- Змесціце элементы, каб быць Цэнтраваць ўнутры элемента, які змяшчае, напрыклад, DIV.
- Ўсталяваць мінімальную вышыню на які змяшчае элемент.
- Аб'яўляе, што змяшчае элемент у якасці вочка табліцы.
- Усталюйце вертыкальнае выраўноўванне на «сярэдзіну».
Напрыклад, вось CSS:
.vcenter {
мін-вышыня: 12em;
дысплей: табліца-клеткі;
вертыкальна-Align: сярэдні;
}
А вось HTML:
<Р> Гэты тэкст вертыкальна ў цэнтры акна.
Вертыкальнае цэнтраванне і больш старыя версіі Internet Explorer
Ёсць некалькі спосабаў прымусіць Internet Explorer (IE) да цэнтру, а затым выкарыстоўваць ўмоўныя каментары, так што толькі IE бачыць стылі, але яны трохі шматслоўныя і непрыгожа. Добрая навіна заключаецца ў тым, што з нядаўнім рашэннем ад Microsoft адмовіцца ад падтрымкі для больш старых версій IE, гэтыя unsupporting браўзэры павінны быць на іх шляху ў бліжэйшы час, што робіць яго больш лёгкім для вэб-дызайнераў выкарыстоўваць сучасныя раскладку падыходы, як CSS Flexbox, які зробіць усё макет CSS, не толькі цэнтраванне, больш лёгкім для ўсіх вэб-дызайнераў.