Веб-сайттарды құру кезінде суреттерді, мәтінді және блог элементтерін ортаға салады
Егер сіз веб-сайттарды қалай құруға үйреніп жатсаңыз, сізде шеберді меңгеру қажет болатын ең көп таралған әдістердің бірі - браузер терезесіндегі элементтерді қалай ортаға салу керектігі. Бұл беттегі суретті ортаға салу немесе жобаның бір бөлігі ретінде бас тақырыптар сияқты орталықты негіздейтін мәтін болуы мүмкін.
Орталықтандырылған суреттердің немесе мәтіннің немесе тіпті бүкіл веб-сайтыңыздың бұл көрнекі көрінісін орындаудың дұрыс жолы - Cascading Style Sheets (CSS) . Центрирование үшін қасиеттердің көпшілігі CSS 1.0-де болғандықтан, олар CSS3 және заманауи веб-браузерлермен жақсы жұмыс істейді.
Веб-дизайндың көптеген аспектілері сияқты, CSS-ті элементтерді веб-беттегі орталықтарға қолданудың бірнеше тәсілдері бар. Бұл визуалды көрініске қол жеткізу үшін CSS-ні пайдаланудың әртүрлі тәсілдерін қарастырайық.
CSS-дағы орталық элементтерге CSS-ні пайдалану туралы шолу
CSS-ті орталықтандыру веб-дизайнерлерді бастау үшін күрделі болуы мүмкін, себебі бұл бір визуалды стильді орындаудың әртүрлі тәсілдері бар. Әдістердің әртүрлілігі әдемі немесе тәжірибелі болуы мүмкін, алайда барлық техниканың әрбір элементте жұмыс істемейтінін білетін веб-әзірлеушілер жаңа веб-мамандар үшін өте күрделі болуы мүмкін, өйткені көптеген тәсілдер әдістерді қай кезде пайдалануға болатындығын білуі керек екенін білдіреді. Ең жақсы нәрсе - бірнеше тәсілдерді түсіну. Оларды пайдалануды бастаған кезде, қандай әдістер жақсы жұмыс істейтінін білесіз.
Жоғары деңгейде Сіз CSS-ді келесідей пайдалануға болады:
- Орталығы мәтіні
- Блоктық деңгейдегі элементті (мысалы, бөлім)
- Кескінді ортаға әкеліңіз
- Блокты немесе кескінді тігінен орналастырыңыз
Көптеген жылдар бұрын веб-дизайнерлер суретшілер мен суреттердің ортасы үшін
CSS-мен мәтінді орталықтандыру
Веб-беттегі ең қарапайым нәрсе мәтін болып табылады. Мұны істеу үшін сізге қажет бір ғана стиль сипаты бар: мәтінді туралау. Төмендегі CSS стилін алыңыз, мысалы:
p.center {text-align: center; }
CSS-нің осы сызығымен орталық класспен жазылған әрбір абзац ата-аналық элемент ішінде көлденеңінен орталықтандырылады. Мысалы, егер параграф бөлімнің ішіндегі болса, яғни бұл бөлімнің баласы болатын болса,
HTML-құжатта қолданылған осы сыныптың мысалы:
Бұл мәтін орталықтандырылған.
Мәтінді туралау сипатымен мәтінді ортаға салғанда, ол оның бар элементінің ортасында орналасатындығын және міндетті түрде толық беттің ішіне бағытталмайтынын есте сақтаңыз. Сондай-ақ, орталықтың негізделген мәтіні үлкен мазмұнды блоктарды оқу қиын болуы мүмкін екенін ұмытпаңыз, сондықтан бұл стильді үнемді пайдаланыңыз. Мақала тақырыбы немесе кішігірім блоктар, мысалы, макалаға немесе басқа мазмұнға арналған тақырып мәтіні сияқты, ортақ болған кезде оқуға және ұқыпты қарауға болады, алайда толық мәтіннің өзі сияқты үлкен мәтіндік блоктар контент толығымен орталық болып табыла ма ақталған. Есіңізде болсын, веб-сайт мәтініне қатысты оқылу мүмкіндігі әрдайым маңызды !
CSS-мен мазмұнды блоктау
Блокта - сіздің бетіңізде анықталған ені бар және блоктық деңгей элементі ретінде орнатылған кез келген элементтер. Көбінесе, бұл блок HTML
div.center {
маржа: 0 авто;
ені: 80м;
}
Маржа сипаты үшін осы CSS стенограммасы жоғарғы және төменгі шеттерін 0 мәніне орнатады, ал сол және оң «авто». Бұл айтарлықтай кеңістікті қолданады және оны қарап шығу терезесінің екі жағына біркелкі бөліп, элементті тиімді түрде бетке ортақ қылып алады.
Мұнда HTML-де қолданылады:
бірақ оның ішіндегі мәтін тураланған.
Сіздің блоктың белгілі бір ені болғанша, ол құрамдас элементтің ішінде орналасады. Бұл блоктағы мәтіннің ішіне ешқандай көңіл бөлінбейді, бірақ сол жаққа негізделеді. Бұл - веб-браузерлердегі әдепкіде сол мәтінді қалдырады. Егер сіз мәтінді ортаға салғыңыз келсе, бөлімді ортаға қою үшін осы әдіспен бірге біз бұрын жазылған мәтіндік теңшеу сипатын қолдануға болады.
CSS көмегімен бейнелерді ортаға келтіру
Көптеген браузерлер әдебиетке қараған біз бірдей мәтіндік теңшеу сипатын пайдаланып ортақ пайдаланылған суреттерді көрсететін болса, бұл W3C ұсынбағандай, бұл техникаға сүйену дұрыс емес. Ұсынылмағандықтан, браузерлердің болашақ нұсқалары осы әдіске елемеуді таңдауы мүмкін.
Мәтінді ортаға дәл келтіру үшін суретті ортаға қоюдың орнына браузерге кескіннің блоктық деңгей элементі екендігін айқындаңыз. Осылайша, кез-келген басқа блоктың секілді сіз оны ортаға сала аласыз. Міне, осы жағдайды жасау үшін CSS:
img.center {
дисплей: блок;
margin-left: auto;
margin-right: auto;
}
Міне, біз орталықты қалайтын бейне үшін HTML:
Сіз сондай-ақ CSS-ні (төменде қараңыз) пайдаланып, объектілерді ортаға сала аласыз, бірақ бұл тәсіл ұсынылмайды, себебі ол HTML түзетулеріне визуалды мәнерлерді қосады. Есіңізде болсын, стиль мен құрылымды ажыратқыңыз келсе, CSS стильдерін HTML кодынызға бөліп, бөліп тастаңыз және мүмкіндігінше аулақ болу керек.
Элементтерді CSS-мен тігінен орталау
Центральные объекты тігінен әрдайым веб-дизайнда қиындық туғызды, бірақ CSS3-дегі CSS-ң икемді қораптың орналасу модулін шығарумен бірге, мұны істеу жолы бар.
Тігінен туралау жоғарыда көрсетілген көлденең үйлесімге ұқсас жұмыс істейді. CSS сипаты орта мәнімен тік-туралау болып табылады.
.vcenter {
тік-туралау: орташа;
}
Бұл көзқарастың төмендеуі барлық CSSFlexBox браузерлерін қолдамайды, бірақ бұл жаңа CSS-нің орналасу әдісіне көбірек түседі! Шын мәнісінде, бүгінгі күні барлық заманауи браузерлер осы CSS стилін қолдайды. Бұл Flexbox-тегі жалғыз мәселелеріңіз ескірген браузерлердің нұсқасы болатынын білдіреді.
Егер ескі браузерлермен проблемалар туындаса, W3C мәтінді тігінен контейнерге келесі әдісті пайдаланып мәтінді ортаға салуды ұсынады:
- Элементтерді div сияқты бөлектелген элементтің ортасына орналастырыңыз.
- Құрамында элементтің ең төменгі биіктігін орнатыңыз.
- Элементті қамтитын кесте ұяшығы деп жариялаңыз.
- Тігінен туралауды «ортасына» қойыңыз.
Мысалы, мұнда CSS:
.vcenter {
мин-биіктігі: 12м;
дисплей: кесте ұяшығы;
тік-туралау: орташа;
}
Міне HTML:
Бұл мәтін тігінен орталықта орналасқан.
Vertical Centre және Internet Explorer шолғышының ескі нұсқалары
Internet Explorer (IE) орталығын ортаға қоюға мәжбүрлеудің кейбір жолдары бар және шартты түсініктемелерді тек IE мәнерлерін көретін етіп қолдануға болады, бірақ олар біраз ойдан шығарылған және ұсақ. Жақсы жаңалық, бұл Microsoft корпорациясының IE ескі нұсқаларына қолдау көрсетуді тоқтату туралы соңғы шешімі болғандықтан, қолдау көрсетілмейтін браузерлер жақында шығу керек, бұл веб-дизайнерлерге CSS FlexBox сияқты заманауи орналасу тәсілдерін қолдануға жеңілдетеді, ол барлық CSS-ті жасайды, тек қана ортақ емес, барлық веб-дизайнерлер үшін оңайырақ болады.